title: Vue Router 4与路由管理实战
date: 2024/6/7
updated: 2024/6/7
excerpt:
这篇文章介绍了如何在Vue.js应用中利用Vue Router实现单页面应用的路由管理，包括配置路由、导航守卫的使用、路由懒加载以优化性能以及动态路由的实现方法，旨在提升用户体验和应用加载效率
categories:
tags:
Vue Router 是 Vue.js 的官方路由管理器，它用于构建单页面应用程序（Single Page Application，SPA）。在单页面应用中，页面不会重新加载，而是通过异步请求来更新页面内容。Vue Router 允许我们通过定义路由规则来实现不同页面组件的切换，它提供了一种简洁的、声明式的路由方式，使得页面之间的导航变得简单直观。
Vue Router 的主要作用包括：
Vue Router 的发展可以分为几个阶段：
Vue Router 4 带来了以下新特性：
在开始使用 Vue Router 4 之前，需要确保已经安装了 Node.js 和 npm。然后可以使用 Vue CLI 来创建一个新的 Vue 3 项目，Vue CLI 会自动安装 Vue Router 4。
npm install -g @vue/cli
vue create my-vue-router-project
在创建好的项目中，可以使用 npm 或 yarn 来安装 Vue Router 4。
npm install vue-router@4
# 或者
yarn add vue-router@4
在 Vue 3 项目中，通常会在 src/router 目录下创建一个 index.js 文件来配置路由表。
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
路由懒加载可以帮助我们将不同路由对应的组件分割成不同的代码块，从而提高应用的加载速度。在 Vue Router 4 中，可以使用动态导入（Dynamic Imports）来实现路由的懒加载。
AD：等你探索
const routes = [
{
path: '/',
component: () => import('../views/Home.vue')
},
{
path: '/about',
component: () => import('../views/About.vue')
}
];
定义路由就是创建一个路由表，它由一组路由规则组成，每个规则都定义了一个路径和对应的组件。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
使用 <router-link> 组件进行声明式导航：
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</template>
使用 router.push 方法进行编程式导航：
// 在 Vue 组件的 methods 中
methods: {
navigateToAbout() {
this.$router.push('/about');
}
}
动态路由允许我们在路由路径中定义参数部分，从而使得一个路由可以匹配多个路径。动态片段用 : 来标识。
const routes = [
// 动态路径参数以冒号 `:` 开头
{ path: '/user/:userId', component: User }
];
在组件中可以通过 $route.params 访问这些参数：
export default {
computed: {
userId() {
return this.$route.params.userId;
}
}
}
Vue Router 允许我们嵌套路由，这意味着你可以在路由中定义路由，实现组件的嵌套显示。
const routes = [
{
path: '/user/:userId',
component: User,
children: [
// 当 /user/:userId 匹配成功后，会渲染 User 组件，
// User 组件内部会渲染嵌套的 <router-view>，显示 UserPosts
{
path: 'posts',
component: UserPosts
},
// ...其他子路由
]
}
];
在 User 组件内部，你可以使用 <router-view> 来显示子路由匹配到的组件：
<template>
<div>
<h2>User {{ userId }}</h2>
<router-view></router-view> <!-- 子路由匹配到的组件将在这里渲染 -->
</div>
</template>
导航守卫是 Vue Router 提供的一种机制，用于在路由发生改变时执行一些逻辑，如权限验证、日志记录等。导航守卫可以控制路由是否允许跳转，以及在跳转前后执行特定的操作。
AD：享受无干扰的沉浸式阅读之旅
全局守卫作用于整个应用的所有路由。Vue Router 提供了三种全局守卫：
router.beforeEach：全局前置守卫，在路由切换前被调用。router.beforeResolve：全局解析守卫，在导航被确认前，所有组件内守卫和异步路由组件被解析之后调用。router.afterEach：全局后置守卫，在路由切换后被调用。// 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
// to 和 from 都是路由信息对象
// next 是一个函数，必须调用它来 resolve 这个钩子
next(); // 确保一定要调用 next()
});
路由独享守卫是在路由配置上直接定义的守卫，只作用于当前路由或嵌套路由。
const routes = [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 在进入路由前执行的逻辑
next();
}
}
];
组件内守卫是在组件内部定义的守卫，包括：
beforeRouteEnter：在路由进入前调用，此时组件实例还未创建。beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。beforeRouteLeave：在离开当前路由时调用。export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
next();
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于 /foo/bar 路由来说，当 /foo/baz 导航时，
// 由于两个路由都渲染同一个 Foo 组件，因此这个守卫会被调用
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
next();
}
}
路由懒加载是一种优化技术，它允许我们在需要时才加载路由对应的组件，而不是在应用初始化时就加载所有组件。这可以减少初始加载时间，提高应用性能。
AD：覆盖广泛主题工具可供使用
const Foo = () => import('./Foo.vue');
const routes = [
{ path: '/foo', component: Foo }
];
const routes = [
{
path: '/bar',
component: () => import(/* webpackChunkName: "group-bar" */ './Bar.vue')
}
];
代码分割是一种将代码库分割成小块的技术，这些小块可以在需要时按需加载。这通常通过 Webpack 等打包工具实现，可以显著提高应用的加载速度和性能。
路由参数可以通过路由路径、查询参数或路由元信息传递。
查询参数是通过 URL 的查询字符串传递的参数，可以通过 $route.query 访问。
const routes = [
{ path: '/search', component: Search }
];
在组件中访问：
export default {
computed: {
query() {
return this.$route.query;
}
}
}
路径参数是通过路由路径中的动态片段传递的参数，可以通过 $route.params 访问。
const routes = [
{ path: '/user/:id', component: User }
];
在组件中访问：
export default {
computed: {
userId() {
return this.$route.params.id;
}
}
}
路由元信息是在路由配置中定义的额外信息，可以通过 $route.meta 访问。
const routes = [
{
path: '/foo',
component: Foo,
meta: { requiresAuth: true }
}
];
在守卫中访问：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
在路由守卫中，我们可以结合数据获取逻辑，确保在路由切换前获取到必要的数据。
export default {
beforeRouteEnter(to, from, next) {
// 在进入路由前获取数据
fetchData().then(() => {
next();
});
}
}
以上是 Vue Router 高级部分的内容概述，涵盖了导航守卫、路由懒加载、代码分割以及参数传递和数据获取等高级主题。这些内容对于构建复杂、高性能的单页面应用至关重要。
在项目开始时，合理规划项目结构是非常重要的。通常，我们会将路由配置文件、组件、视图等分别放置在不同的目录中，以便于管理和维护。
/src
/router
index.js // 路由配置文件
/views // 视图组件
Home.vue
About.vue
/components // 可复用组件
Header.vue
Footer.vue
App.vue
main.js
在 index.js 中配置路由，并使用 <router-link> 和 <router-view> 进行导航和视图渲染。
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
在 App.vue 中使用：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
在项目中应用路由守卫，例如使用 beforeEach 进行权限验证。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
使用路由懒加载和代码分割提高应用性能。
const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ '@/views/About.vue');
动态路由允许我们根据用户的角色或权限动态地添加或移除路由。
在用户登录后，根据用户的角色或权限信息，动态配置路由。
使用 router.addRoute 方法动态添加路由。
if (user.role === 'admin') {
router.addRoute({
path: '/admin',
component: Admin,
meta: { requiresAdmin: true }
});
}
结合路由守卫进行权限验证，确保用户只能访问其权限范围内的路由。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAdmin && !isAdmin) {
next('/');
} else {
next();
}
});
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
在 Vuex 中存储路由状态，如当前路由信息、历史记录等。
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
currentRoute: null
},
mutations: {
setCurrentRoute(state, route) {
state.currentRoute = route;
}
},
actions: {
updateRoute({ commit }, route) {
commit('setCurrentRoute', route);
}
}
});
在路由守卫中更新 Vuex 状态。
router.beforeEach((to, from, next) => {
store.dispatch('updateRoute', to);
next();
});
使用 Vuex 存储的路由状态实现面包屑导航。
<template>
<div>
<router-link v-for="route in breadcrumbs" :key="route.path" :to="route.path">
{{ route.name }}
</router-link>
</div>
</template>
<script>
export default {
computed: {
breadcrumbs() {
const currentRoute = this.$store.state.currentRoute;
// 根据当前路由生成面包屑
// ...
}
}
}
</script>
以上内容涵盖了 Vue Router 4 在实际项目中的应用，包括项目结构规划、路由配置、路由守卫、动态路由管理以及与 Vuex 的结合。这些知识点对于构建复杂的前端应用至关重要。
Vue Router 4 提供了丰富的 API 用于路由管理。以下是一些核心 API 的简要参考：
createRouter: 创建并返回一个路由器实例。import { createRouter, createWebHistory } from 'vue-router';
const routes = [
// 路由配置数组
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
router.beforeEach: 全局前置守卫。router.beforeEach((to, from, next) => {
// ...
});
router.addRoute: 动态添加路由。router.addRoute({
path: '/new-route',
component: NewRouteComponent,
});
router.replace: 替换当前路由。router.replace('/new-route');
router.push: 导航到一个新的路由。router.push('/new-route');
router.go: 在历史记录中前进或后退。router.go(-1); // 后退一步
router.go(1); // 前进一步
router.currentRoute: 当前路由信息。console.log(router.currentRoute.value); // 当前路由对象
router.resolve: 解析路由记录。const resolvedRoute = router.resolve('/path');
router.addRoutes: 动态添加多个路由。router.addRoutes([
// 路由配置数组
]);
更多 API 请参考 Vue Router 4 的官方文档。
以下是一些 Vue Router 4 使用过程中常见的问题及解答：
使用动态导入语法 (import()) 实现路由组件的懒加载。
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
可以在路由配置中使用 beforeEnter 守卫，或者在全局范围内使用 router.beforeEach。
使用 router.addRoute 方法动态添加路由。
通过 router.currentRoute 获取当前路由信息。
使用 router.push 或 router.replace 进行路由导航。
Vue Router 4 的版本更新日志记录了每个版本的更新内容、新特性、改进和修复的 bug。以下是一些主要的更新内容：
这篇文章介绍了如何在Vue.js应用中利用Vue Router实现单页面应用的路由管理，包括配置路由、导航守卫的使用、路由懒加载以优化性能以及动态路由的实现方法，旨在提升用户体验和应用加载效率