深入理解 Vue Router 及其 router 和 route 变量
在使用 Vue.js 进行单页面应用开发时，Vue Router 是一个不可或缺的工具。它使得我们可以轻松地管理应用中的路由，提供了流畅的用户体验。然而，在实际开发中，许多开发者可能会混淆 router 和 route 这两个变量。本文将介绍 Vue Router 的基础知识，并详细探讨 router 和 route 变量的区别及其具体用法。
Vue Router 基础
Vue Router 是 Vue.js 的官方路由管理器，它允许我们定义应用的路由规则，并基于这些规则显示不同的组件。通过 Vue Router，我们可以轻松实现单页面应用中的路由切换。
安装和配置 Vue Router
首先，我们需要安装 Vue Router。假设你已经有一个使用 Vue CLI 创建的 Vue 项目，可以使用以下命令安装 Vue Router：
npm install vue-router
安装完成后，在 src 目录下创建一个 router 文件夹，并在其中新建一个 index.js 文件：
// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;
在 src/main.js 中导入并使用这个路由器：
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
router 和 route 的区别
在 Vue Router 中，router 和 route 分别代表路由器实例和当前激活的路由对象。理解这两者的区别对于正确使用 Vue Router 至关重要。
router 对象
router 是 Vue Router 的实例，包含了所有的路由配置和导航逻辑。通过 router 对象，我们可以执行全局的导航操作，例如编程式导航、导航守卫等。
router 对象的使用场景
编程式导航：通过调用
router实例的方法来改变当前的路由。this.$router.push('/home'); this.$router.replace('/profile'); this.$router.go(-1); // 后退一步导航守卫：在路由器实例上设置全局的导航守卫。
// src/router/index.js router.beforeEach((to, from, next) => { // 做一些验证或权限检查 if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); } else { next(); } });访问路由配置：可以通过
router.options.routes访问所有的路由配置。const routes = this.$router.options.routes;
route 对象
route 是当前激活的路由对象，包含了当前路由的所有信息，包括路径、参数、查询字符串、匹配到的路由记录等。route 对象是只读的，我们只能通过导航来改变它。
route 对象的使用场景
获取当前路由信息：包括路径、参数、查询字符串等。
const path = this.$route.path; const params = this.$route.params; const query = this.$route.query;检测路由变化：可以在组件的
watch选项中监测$route对象的变化。watch: { $route(to, from) { // 当路由变化时执行一些操作 console.log('Navigated from', from.path, 'to', to.path); } }匹配路由记录：通过
this.$route.matched获取当前匹配到的所有路由记录。const matchedRoutes = this.$route.matched;
代码示例
以下是一个简单的示例，展示了如何在同一个组件中使用 router 和 route：
<template>
<div>
<h1>当前路径：{{ $route.path }}</h1>
<button @click="goToHome">回到首页</button>
</div>
</template>
<script>
export default {
methods: {
goToHome() {
this.$router.push('/home');
}
},
watch: {
$route(to, from) {
console.log('路由变化：从', from.path, '到', to.path);
}
}
}
</script>
在这个示例中，我们通过 this.$route.path 获取当前路径，并在按钮点击时通过 this.$router.push('/home') 实现导航。同时，我们还在 watch 选项中监测路由变化并打印相关信息。
总结
本文介绍了 Vue Router 的基础知识，并详细探讨了 router 和 route 两个变量的区别及其使用场景。router 主要用于执行全局的导航操作和设置导航守卫，而 route 则用于获取当前路由的信息和监测路由变化。理解并正确使用这两者，能够帮助我们更高效地管理 Vue.js 应用中的路由逻辑。
参考链接
练习题
题目：在 Vue.js 应用中，Vue Router 主要用于管理什么？
A. 状态管理
B. 路由配置和导航
C. 数据请求
D. 事件处理
正确答案和解析点击：https://mianjing.achun.site/#/article-study/10002
题目：this.$router.push('/home') 用于什么操作？
A. 访问当前路由信息
B. 设置全局的导航守卫
C. 编程式导航以改变路由
D. 获取路由配置
正确答案和解析点击：https://mianjing.achun.site/#/article-study/10002
题目：this.$route 对象包含以下哪些信息？
A. 当前路由的所有信息
B. 全局的路由配置
C. 路由守卫的定义
D. 路由器实例
正确答案和解析点击：https://mianjing.achun.site/#/article-study/10002
题目：如何在组件中监听路由变化？
A. 使用 this.$router.push()
B. 使用 router.beforeEach()
C. 使用 $watch: { $route(to, from) { ... } }
D. 使用 router.options.routes
正确答案和解析点击：https://mianjing.achun.site/#/article-study/10002
题目：哪一个方法可以用于在 Vue Router 中设置全局的导航守卫？
A. router.push()
B. router.beforeEach()
C. this.$route.match()
D. this.$router.replace()
正确答案和解析点击：https://mianjing.achun.site/#/article-study/10002
