读懂 Vue3 路由：从入门到实战
在构建现代化单页应用（SPA）时，Vue3 凭借其简洁高效的特性成为众多开发者的首选。
而 Vue3 路由（Vue Router）则是 Vue3 生态中不可或缺的一部分，它就像是单页应用的 “导航地图”，帮助用户在不同的页面（组件）之间自由穿梭，同时保证页面的流畅切换，无需刷新整个网页。
一、Vue3 路由的基础概念
1. 什么是路由
路由可以简单理解为 “网址” 与 “页面内容（组件）” 之间的对应关系。
在传统的多页应用中，每一个页面都是一个独立的 HTML 文件，通过超链接跳转时，浏览器会重新加载新的页面。而在单页应用里，整个应用只有一个 HTML 文件，通过路由来控制不同组件的显示与隐藏，从而模拟出页面跳转的效果。
例如，当用户访问 https://example.com/home 时，显示首页组件；访问 https://example.com/about 时，显示关于我们的组件，这就是路由在起作用。
2. Vue Router 的作用
Vue Router 是 Vue.js 官方的路由管理器，专门为 Vue 应用开发设计。它不仅实现了 URL 与组件的映射，还提供了诸如路由嵌套、路由守卫、动态路由等强大功能，让开发者能够轻松构建复杂的单页应用架构，提升用户体验。
二、Vue3 路由的安装与基本使用
1. 安装 Vue Router
在使用 Vue3 路由之前，需要先安装它。如果你的项目是通过 npm 管理依赖，可以在项目根目录下执行以下命令：
npm install vue-router@4
如果你使用的是 yarn，则执行：
yarn add vue-router@4
这里安装的是 Vue Router 4 版本，它完美适配 Vue3。
2. 创建路由实例
安装完成后，在项目中创建一个路由文件，例如 router.js。在该文件中，引入必要的模块并创建路由实例，代码如下：
import { 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(),routes
});export default router;
在这段代码中：
- 首先从
vue-router中引入createRouter和createWebHistory方法。createRouter用于创建路由实例，createWebHistory用于创建基于 HTML5 History API 的路由模式，这种模式下的 URL 更加简洁美观，例如https://example.com/about，没有多余的哈希符号。 - 接着引入了两个组件
Home和About，它们将作为不同路由对应的显示内容。 - 然后定义
routes数组，其中每个对象表示一条路由规则，包含path（路由路径）、name（路由名称，方便在代码中引用）和component（对应的组件）。 - 最后通过
createRouter方法创建路由实例，并将配置好的history和routes传入，再将路由实例导出，以便在 Vue 应用中使用。
3. 在 Vue 应用中使用路由
在 main.js 文件中，引入创建好的路由实例，并将其挂载到 Vue 应用上：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');
这样，路由就已经集成到 Vue 应用中了。在 App.vue 文件中，可以使用 <router-view> 组件来显示当前路由对应的组件内容，例如：
<template><div id="app"><router-view></router-view></div>
</template>
同时，还可以使用 <router-link> 组件来创建导航链接，代替传统的 <a> 标签，例如：
<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link><router-view></router-view></div>
</template>
此时，点击这些链接，页面会在不刷新的情况下显示对应的组件内容。
三、Vue3 路由的进阶功能
1. 动态路由
在实际应用中，经常会遇到需要传递参数的路由，例如显示用户详情页，每个用户都有一个唯一的 ID。这时就可以使用动态路由，在路由路径中使用参数，示例如下：
const routes = [{path: '/user/:id',name: 'User',component: User}
];
在上述代码中，:id 就是一个动态参数。当用户访问 https://example.com/user/1 时，1 这个值会被传递到 User 组件中。在 User 组件中，可以通过 this.$route.params.id（在选项式 API 中）或 useRoute().params.id（在组合式 API 中）来获取这个参数值。
2. 路由嵌套
有些页面的结构比较复杂，包含多个子页面，这时候就需要用到路由嵌套。例如，在一个博客应用中，文章详情页可能还包含评论区、相关文章推荐等子模块，每个子模块可以对应一个子路由。路由嵌套的配置方式如下：
const routes = [{path: '/article',name: 'Article',component: Article,children: [{path: ':id',name: 'ArticleDetail',component: ArticleDetail},{path: ':id/comments',name: 'ArticleComments',component: ArticleComments}]}
];
在上述代码中，children 数组定义了 Article 组件的子路由。访问 https://example.com/article/1 会显示 ArticleDetail 组件，访问 https://example.com/article/1/comments 会显示 ArticleComments 组件。
在 Article.vue 组件中，同样需要使用 <router-view> 来显示子路由对应的内容。
3. 路由守卫
路由守卫用于在路由跳转的不同阶段执行一些自定义逻辑，例如验证用户登录状态、记录页面访问日志等。常见的路由守卫有全局守卫、路由独享守卫和组件内守卫。
- 全局守卫：在
router.js文件中可以定义全局前置守卫router.beforeEach和全局后置钩子router.afterEach。例如，使用全局前置守卫来验证用户是否登录：
router.beforeEach((to, from, next) => {const isLoggedIn = localStorage.getItem('isLoggedIn');if (to.meta.requiresAuth &&!isLoggedIn) {next('/login');} else {next();}
});
上述代码中，to 表示即将要进入的目标路由对象，from 表示当前导航正要离开的路由，next 是一个函数，调用 next() 表示放行，继续跳转；调用 next('/login') 表示将导航重定向到 /login 路由。
- 路由独享守卫：在路由配置中，可以为每条路由单独设置守卫，例如：
const routes = [{path: '/admin',name: 'Admin',component: Admin,beforeEnter: (to, from, next) => {// 执行自定义逻辑next();}}
];
- 组件内守卫：在组件内部定义
beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave方法，用于在组件的路由相关操作时执行逻辑。