摘要：在当今的前端开发领域，单页应用（SPA）凭借其出色的用户体验和高效的交互性能，已然成为了主流趋势。Vue.js 作为一款备受青睐的 JavaScript 框架，在构建 SPA 方面展现出了强大的实力。而 vue Router，作为 Vue.js 官方的路由管理
在当今的前端开发领域，单页应用（SPA）凭借其出色的用户体验和高效的交互性能，已然成为了主流趋势。Vue.js 作为一款备受青睐的 JavaScript 框架，在构建 SPA 方面展现出了强大的实力。而 vue Router，作为 Vue.js 官方的路由管理器，更是与 Vue.js 核心实现了深度集成，极大地简化了单页应用的路由管理工作。在 Vue 3 的生态体系中，Vue Router 也与时俱进，进行了全面升级，引入了诸多新特性与改进，为开发者们带来了更为便捷和高效的路由管理体验。接下来，就让我们一同深入探索 Vue 3 中 Vue router 的配置与使用。
（一）安装 Vue Router
在开始配置 Vue Router 之前，首先要确保你的项目已经成功搭建好了 Vue 3 环境。若项目中尚未安装 vue-router，我们可以通过 npm 或 yarn 这两款常用的包管理器来进行安装。以 npm 为例，安装命令如下：
npm install vue-Router@4这里特意指定安装 @4 版本，原因在于 Vue 3 搭配的正是 Vue Router 4，该版本在功能特性和使用方式上与之前的版本存在一定差异，为了确保与 Vue 3 项目的兼容性，安装时务必注意版本的匹配。
（二）创建路由实例
安装完成后，按照惯例，我们会在项目的 src 目录下创建一个 router 文件夹，用于存放路由相关的配置文件。接着，在 router 文件夹中新建 index.js 文件，在这个文件中，我们将完成路由实例的创建工作。以下是一个简单的代码示例：
// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'// 导入路由对应的组件import Home from '../views/Home.vue'import About from '../views/About.vue'const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About }]const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes})export default router在这段代码中，首先从 'vue-router' 中导入了 createRouter 和 createWebHistory 这两个关键函数。createRouter 函数用于创建路由实例，而 createWebHistory 函数则用于启用 HTML5 History 模式。在 HTML5 History 模式下，URL 的表现形式更加简洁美观，不再带有 #符号，能够为用户带来更好的体验。不过需要注意的是，使用这种模式时，服务器端需要进行相应的配置，否则当用户直接刷新页面时，可能会出现 404 错误。倘若你不想进行服务器配置，也可以选择使用 createWebHashHistory 模式，即 Hash 模式。在 Hash 模式下，URL 会带有 #符号，虽然看起来不太美观，但其兼容性更好，在各种环境下都能稳定运行。
routes 数组则定义了路由的映射关系，其中每个对象都包含了三个重要属性：path 表示路径，即用户在浏览器地址栏中输入的 URL 路径；name 是路由名称，它为路由提供了一个唯一的标识，方便我们在代码中通过名称进行导航操作；component 指定了该路径对应的组件，当用户访问对应的路径时，Vue Router 会将该组件渲染到页面上。
（三）在 Vue 应用中使用路由
完成路由实例的创建后，还需要将其引入到 Vue 应用中，才能使整个应用具备路由功能。在 main.js 文件中，我们需要进行如下操作：
// src/main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')通过 app.use (router) 这行代码，我们将刚刚创建好的路由实例挂载到了 Vue 应用上。同时，在根组件 App.vue 中，还需要使用 标签作为路由出口。这个标签的作用是告诉 Vue Router，在该位置渲染与当前 URL 路径匹配的组件。例如：
至此，Vue Router 的基础设置就已经全部完成，整个应用已经具备了基本的路由功能，能够根据用户在地址栏中输入的路径，正确地展示对应的组件内容。
（一）路由模式
Vue Router 4 支持两种主要的路由模式，分别是 Hash 模式和 History 模式，开发者可以根据项目的实际需求和应用场景来灵活选择。
Hash 模式：Hash 模式利用 URL 的 hash（即 #号后面的部分）来模拟一个完整的 URL。当 #号后面的内容发生变化时，页面不会向服务器发送请求，而是在前端直接进行路由的切换。这种模式的最大优势在于兼容性极佳，即使在一些不支持 HTML5 History API 的老旧浏览器中，也能正常运行。其配置方式如下：
const router = createRouter({ history: createWebHashHistory, routes: [...]})History 模式：History 模式借助 HTML5 History API 来实现 URL 的变化。它通过 pushState 和 replaceState 这两个方法来改变浏览器地址栏的 URL，同时页面不会重新加载。在这种模式下，URL 看起来更加简洁、自然，符合现代 Web 应用的设计理念，能够提升用户的体验感。然而，正如前面提到的，使用 History 模式需要服务器进行相应的配置，以确保所有路径都能正确回退到 index.html，避免出现页面刷新后 404 错误的情况。其配置代码如下：
const router = createRouter({ history: createWebHistory, routes: [...]})（二）路由匹配
在实际开发中，我们常常需要根据不同的参数来展示不同的内容，这时就需要用到动态路由匹配功能。例如，我们要创建一个用户详情页面，每个用户都有一个唯一的 ID，通过这个 ID 来展示对应用户的详细信息。在 Vue Router 中，定义动态路由的方式如下：
const routes = [ { path: '/user/:id', name: 'User', component: UserDetail }]在上述代码中，:id 就是一个动态参数。在对应的组件 UserDetail.vue 中，我们可以通过 $route.params.id 来获取这个动态参数的值，从而实现根据不同的用户 ID 展示不同用户信息的功能。例如：
其他用户详情内容（三）嵌套路由
当应用的页面结构较为复杂，存在层级关系时，嵌套路由就派上用场了。通过嵌套路由，我们可以将组件进行分层嵌套，使得应用的结构更加清晰、易于维护。假设我们有一个用户模块，在用户详情页面中，还需要展示用户的个人资料和发布的帖子等子页面，这时就可以使用嵌套路由来实现。以下是一个简单的配置示例：
const routes = [ { path: '/user/:id', name: 'User', component: User, children: [ { path: 'profile', name: 'Profile', component: UserProfile }, { path: 'posts', name: 'Posts', component: UserPosts } ] }]在上述代码中，User 组件是父组件，它包含了两个子路由：profile 和 posts。当用户访问 /user/1/profile 时，会在 User 组件的内部渲染 UserProfile 组件；当访问 /user/1/posts 时，则会渲染 UserPosts 组件。需要注意的是，在父组件 User.vue 中，同样需要使用标签来作为子路由的出口，用于渲染匹配的子组件。例如：在 Vue Router 中，除了可以使用标签来创建导航链接，实现页面之间的跳转外，我们还可以借助 router 实例的方法来进行编程式导航。这种方式在一些特定的场景下，比如根据用户的操作逻辑动态地进行页面跳转，或者在 JavaScript 代码中进行条件判断后决定导航方向时，显得尤为方便。下面为大家介绍几种常用的编程式导航方法：router.push：该方法用于向 history 栈中添加一个新的记录，从而实现页面的跳转。它可以接受多种类型的参数，例如：
传递字符串路径：router.push('/users/eduardo')传递带有路径的对象：router.push({ path: '/users/eduardo' })传递命名的路由，并加上参数，让路由自动生成对应的 URL：router.push({ name: 'user', params: { username: 'eduardo' } })传递带查询参数的对象，最终生成的 URL 类似于 /register?plan=private：router.push({ path: '/register', query: { plan: 'private' } })router.replace：router.replace 方法的功能与 router.push 类似，也是用于实现页面跳转。它们之间唯一的区别在于，router.replace 不会向 history 栈中添加新的记录，而是直接替换掉当前的 history 记录。这意味着，当用户使用 router.replace 进行跳转后，点击浏览器的 “后退” 按钮时，不会回到上一个页面，而是直接回到再上一个页面。例如：
router.replace('/new - page')router.go：router.go 方法用于在 history 栈中进行前进或后退操作，其参数为一个整数，表示前进或后退的步数。例如：
后退一页：router.go(-1)前进一页：router.go(1)后退两页：router.go(-2)路由守卫是 Vue Router 中一个非常重要的功能，它主要用于在路由切换的过程中，通过跳转或取消的方式来守卫导航。通过使用路由守卫，我们可以在路由切换前进行一些必要的逻辑判断和处理，比如验证用户是否登录、检查用户权限等，从而确保用户能够访问到他们有权限访问的页面，提升应用的安全性和用户体验。路由守卫主要分为以下几种类型：
（一）全局前置守卫
全局前置守卫会在每次路由切换之前被调用，无论用户访问的是哪个路由。它的使用方式如下：
router.beforeEach((to, from) => { // 在这里进行逻辑判断 // to表示即将要进入的目标路由对象 // from表示当前导航正要离开的路由对象 // 返回false可以取消导航 return false})例如，我们可以利用全局前置守卫来实现用户登录验证功能。假设我们有一个名为 isLoggedIn 的函数，用于判断用户是否已经登录，代码如下：
router.beforeEach((to, from) => { if (to.meta.requiresAuth &&!isLoggedIn) { // 如果目标路由需要登录权限，而用户未登录，则跳转到登录页面 return { name: 'Login' } }})在上述代码中，我们通过检查 to.meta.requiresAuth 来判断目标路由是否需要登录权限。如果需要，并且用户当前未登录（即 isLoggedIn 返回 false），则返回一个对象，指定跳转到名为 'Login' 的路由，从而引导用户进行登录操作。
（二）路由独享守卫
路由独享守卫是直接定义在路由配置中的守卫，它只对当前路由生效。其使用方式如下：
const routes = [ { path: '/users/:id', name: 'User', component: UserDetails, beforeEnter: (to, from) => { // 在这里进行逻辑判断 // 返回false可以取消导航 return false } }]例如，我们可以在 beforeEnter 守卫中对用户访问的用户详情页面进行权限验证，只有当用户具有相应权限时，才允许访问该页面。
（三）组件内的守卫
除了全局前置守卫和路由独享守卫外，我们还可以在组件内部定义守卫，这些守卫与组件紧密相关，只在组件对应的路由被访问时才会触发。组件内的守卫主要有以下三种：
beforeRouteEnter：该守卫在渲染该组件的对应路由被验证前调用。在这个守卫中，由于组件实例尚未被创建，所以无法直接访问 this，但可以通过 next 函数的参数来访问组件实例。例如：
const UserDetails = { template: `...`, beforeRouteEnter(to, from, next) { next(vm => { // 在这里可以访问组件实例vm }) }}beforeRouteUpdate：当当前路由改变，但是该组件被复用时，会调用 beforeRouteUpdate 守卫。例如，在一个用户详情页面中，当用户切换到不同用户的详情页时，路由发生了变化，但组件可能会被复用，这时就会触发 beforeRouteUpdate 守卫。在这个守卫中，可以直接访问 this 来获取组件实例。例如：
const UserDetails = { template: `...`, beforeRouteUpdate(to, from) { // 在这里可以根据路由变化更新组件的数据 }}beforeRouteLeave：在导航离开渲染该组件的对应路由时，会调用 beforeRouteLeave 守卫。这个守卫通常用于在用户离开页面时，进行一些数据保存或提示操作。例如，当用户在编辑页面中输入了内容但尚未保存，此时想要离开页面，我们可以通过 beforeRouteLeave 守卫来提示用户是否保存数据。例如：
const UserDetails = { template: `...`, beforeRouteLeave(to, from) { if (this.hasUnsavedChanges) { return confirm('你有未保存的内容，确定要离开吗？') } }}路由元信息在定义路由时，我们可以为每个路由对象配置一个 meta 字段，这个字段可以用来存储一些与路由相关的额外信息，我们称之为路由元信息。这些元信息可以在路由守卫或组件中进行访问，从而实现一些基于路由配置的逻辑判断和处理。例如，我们可以利用路由元信息来标记哪些路由需要用户登录才能访问，哪些路由是公开可访问的。以下是一个配置路由元信息的示例：
const routes = [ { path: '/posts', name: 'Posts', component: PostsLayout, children: [ { path: 'new', name: 'NewPost', component: PostsNew, meta: { requiresAuth: true } }, { path: ':id', name: 'PostDetail', component: PostsDetail, meta: { requiresAuth: false } } ] }]在上述代码中，我们为 PostsNew 路由配置了 meta.requiresAuth 为 true，表示该路由需要用户登录后才能访问；而 PostsDetail 路由的 meta.requiresAuth 为 false，表示该路由是公开可访问的。在路由守卫中，我们可以通过访问 to.matched.some (record => record.meta.requiresAuth) 来判断目标路由是否需要登录权限。例如：
router.beforeEach((to, from) => { if (to.matched.some(record => record.meta.requiresAuth) &&!isLoggedIn) { return { name: 'Login' } }})通过这种方式，我们可以根据路由元信息，灵活地控制用户对不同路由的访问权限，确保应用的安全性和用户体验。
Vue 3 中的 Vue Router 为我们提供了丰富而强大的路由管理功能，通过合理地配置和使用这些功能，我们能够轻松构建出高效、灵活且用户体验良好的单页应用。在本文中，我们详细介绍了 Vue Router 的安装和基础设置，深入探讨了路由配置的各个方面，包括路由模式、路由匹配、嵌套路由等，同时还介绍了编程式导航、路由守卫以及路由元信息等重要特性的使用方法。希望通过本文的学习，能够帮助广大互联网软件开发人员更好地掌握 Vue 3 中 Vue Router 的配置与使用技巧，在实际项目开发中发挥出 Vue Router 的最大优势，提升项目的开发效率和质量。在实际应用中，大家可以根据项目的具体需求和业务场景，灵活运用这些知识，不断优化和完善自己的应用。
来源：从程序员到架构师
