Vue Router：让你的应用路由起来！
前端开发工程师（主业）、技术博主（副业）、已过CET6
阿珊和她的猫_CSDN个人主页
牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
-
- 1. 路由导航
- 2. 嵌套路由
- 3. 路由参数
- 4. 路由过渡
- 5. 导航守卫
- 6. 路由状态管理
Vue Router 是 Vue.js 官方的路由管理器，它提供了一种机制来实现单页面应用（SPA）的路由功能。主要作用包括：
1. 路由导航
Vue Router 允许你在应用程序中定义不同的路由，并根据用户的导航操作跳转到相应的路由。它通过监听 URL 的变化来响应导航操作，并能够使用编程方式进行路由跳转。
当使用 Vue Router 时，可以通过以下代码案例来演示如何定义路由、监听导航操作以及进行编程式的路由跳转：
首先，安装并导入 Vue Router：
npm install vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
然后，定义路由组件：
// Home.vue
Home
Welcome to the home page!
// About.vue
About
This is the about page.
接下来，创建一个 Vue Router 实例并配置路由：
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
const router = new VueRouter({
routes
});
在 Vue 根实例中使用
new Vue({
router,
el: '#app'
});
<template>
<div id="app">
<h1>My Apph1>
<router-view>router-view>
div>
template>
现在，你可以根据用户的导航操作触发路由跳转，或者使用编程式的导航方式进行路由跳转：
// 监听导航操作
router.beforeEach((to, from, next) => {
// 做一些导航守卫的逻辑处理
next();
});
// 编程式路由跳转
// 使用 $router.push 方法跳转到指定路由
router.push('/about');
通过以上代码案例，你可以更好地理解 Vue Router 的使用方式，并实现在应用程序中定义不同的路由，并根据用户的导航操作进行路由跳转的功能。
2. 嵌套路由
Vue Router 支持嵌套路由，可以在一个父路由下定义子路由。这样可以轻松地实现页面的层级嵌套和组织，使得应用程序的路由结构更加清晰和可维护。
当使用 Vue Router 来实现嵌套路由时，可以通过以下代码案例来演示如何定义父子路由的嵌套和组织：
首先，定义父路由和子路由的组件：
// Parent.vue
Parent
This is the parent page.
Child
This is the child page.
接下来，创建一个 Vue Router 实例并配置父子路由：
const routes = [
{
path: '/',
component: Parent,
children: [
{
path: '',
component: Child
},
{
path: 'child',
component: Child
}
]
}
];
const router = new VueRouter({
routes
});
在父路由组件中使用
Parent
This is the parent page.
现在，当访问父路由时，子路由的组件会被渲染到父路由组件的
例如，当访问 / 路径时，父路由组件会渲染，并同时渲染子路由组件到父路由组件的 /child 路径时，父路由组件同样会被渲染，但子路由组件会根据路由配置进行渲染。
通过以上代码案例，你可以实现在 Vue Router 中创建父子路由的嵌套和组织，使得应用程序的路由结构更加清晰和可维护。
3. 路由参数
Vue Router 允许定义路由参数，这样可以在路由中传递参数，以实现动态路由的效果。参数可以通过 URL 的路径、查询字符串或者路由的配置项进行传递，从而实现对应组件的动态渲染和数据展示。
当使用 Vue Router 定义路由参数时，可以通过以下代码案例来演示如何传递参数和在组件中获取参数：
首先，定义带有参数的路由：
const routes = [
{
path: '/user/:id',
component: User
}
];
在上述代码中，:id 是路径参数，可以在路由中传递不同的值，例如 /user/1 或 /user/2。
然后，在组件中通过 $route.params 来获取传递的参数：
User Profile
User ID: {{ $route.params.id }}
使用 $route.params.id 可以获取路由中传递的参数，进行对应组件的动态渲染和数据展示。
另外，还可以在定义路由时指定查询字符串参数：
const routes = [
{
path: '/user',
component: User,
props: (route) => ({
query: route.query
})
}
];
在上述代码中，route.query 是查询字符串参数，可以在 URL 中传递，例如 /user?id=1&name=John。
然后，在组件中可以使用 props 接收查询字符串参数：
User Profile
User ID: {{ query.id }}
User Name: {{ query.name }}
通过以上代码，你可以在 Vue Router 中定义路由参数，并在组件中获取路径参数或查询字符串参数，实现动态路由的效果，进行组件的动态渲染和数据展示。
4. 路由过渡
Vue Router 对页面切换时的过渡效果提供了内置的支持。通过配置路由的过渡效果，可以实现页面之间的平滑过渡和动画效果，提升用户体验。
当使用 Vue Router 对页面切换时提供过渡效果时，可以通过以下代码案例来演示如何配置路由过渡效果：
首先，定义需要应用过渡效果的组件：
// Home.vue
Home
Welcome to the home page!
// About.vue
About
About us
接下来，在组件中使用
在上述代码中，我们使用了名为 “fade” 的过渡效果类名，并通过 CSS 定义了过渡的动画效果。
最后，在路由配置中为路由添加过渡效果的名称：
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
在上述代码中，当切换到 / 路径时，会加载 Home 组件并应用过渡效果。
5. 导航守卫
Vue Router 提供了导航守卫的功能，可以在路由导航过程中拦截和处理导航操作。通过导航守卫，可以实现在路由切换前后进行数据加载、权限验证、跳转取消等逻辑的处理。
当使用 Vue Router 的导航守卫时，可以通过以下代码案例来演示如何拦截和处理路由导航：
首先，定义导航守卫的回调函数：
const router = new VueRouter({
routes: [...],
});
router.beforeEach((to, from, next) => {
// 在路由切换前处理逻辑
// 可以进行数据加载、权限验证等操作
next(); // 调用 next() 继续路由导航
});
在上述代码中，beforeEach 是全局前置守卫，在每次路由切换前都会执行该回调函数。其中的 to 参数表示将要导航到的目标路由，from 参数表示当前导航的来源路由。
在回调函数中，可以进行一些逻辑处理，例如数据加载、权限验证等。需要注意的是，如果希望继续路由导航，需要调用 next()。
还可以定义全局后置守卫和组件内的守卫：
router.afterEach((to, from) => {
// 在路由切换后处理逻辑
});
const routes = [
{
path: '/user/:id',
component: User,
beforeEnter: (to, from, next) => {
// 在进入路由前处理逻辑
next(); // 调用 next() 继续路由导航
}
}
];
上述代码中的 afterEach 是全局后置守卫，会在每次路由切换后执行。而 beforeEnter 是路由配置中的路由独享守卫，只会在特定的路由进入前执行。
通过定义导航守卫的回调函数，可以实现在路由导航过程中的拦截和处理操作。这样你可以加载数据、验证权限、取消跳转等，来控制路由的行为和逻辑。
6. 路由状态管理
Vue Router 可以与 Vuex（Vue.js 的状态管理库）进行无缝集成，可以在路由导航过程中进行状态管理，实现不同路由之间的数据共享和状态传递。
当使用 Vue Router 与 Vuex 进行集成时，可以通过以下代码案例来演示如何在路由导航过程中进行状态管理：
首先，创建一个 Vuex 的 store，定义需要共享和管理的状态：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
user: null // 用户信息
},
mutations: {
setUser(state, user) {
state.user = user;
}
}
});
export default store;
在上述代码中，我们创建了一个包含 user 状态的 Vuex store，并定义了一个名为 setUser 的 mutation，用于更新 user 状态的值。
接下来，在路由导航过程中使用 Vuex 进行状态管理，可以在导航守卫的回调函数中调用 Vuex 的 mutation 更新状态：
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
在上述代码中，我们将 Vuex store 对象传递给 Vue 实例，使其可以在整个应用中访问和使用。
在导航守卫的回调函数中更新 Vuex store 的状态：
router.beforeEach((to, from, next) => {
// 在路由切换前处理逻辑
// 可以进行数据加载、权限验证等操作
const user = // 获取用户信息的逻辑，例如从后端获取用户数据
store.commit('setUser', user); // 调用 Vuex 的 mutation 更新状态
next(); // 调用 next() 继续路由导航
});
在上述代码中，我们在导航守卫的回调函数中获取用户信息，并通过调用 Vuex 的 setUser mutation 更新 user 状态。
在其他组件中访问 Vuex store 的状态：
// MyComponent.vue
export default {
computed: {
user() {
return this.$store.state.user; // 访问 Vuex store 的状态
}
}
};
在上述代码中，我们使用计算属性 user 来访问 Vuex store 中的 user 状态。
通过上述代码案例，在路由导航过程中可以使用 Vuex 进行状态管理，实现不同路由之间的数据共享和状态传递。这样可以简化应用的数据传递和管理，并提升开发效率。
通过以上功能，Vue Router 提供了一种便捷的方式来管理前端应用程序的路由，使得开发者可以更好地组织和管理应用的不同页面和组件，并实现良好的用户导航体验。