Vue 3 入门教程 8 - 路由管理 Vue Router
一、Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，用于构建单页面应用（SPA）。单页面应用是指整个应用只有一个 HTML 页面，通过动态切换页面内容来模拟多页面跳转的效果，从而提升用户体验和页面加载效率。
Vue Router 的核心功能包括：
- 嵌套路由映射：支持根据组件结构嵌套路由配置。
- 路由参数：可以在路由路径中传递参数，实现动态路由。
- 路由守卫：提供了导航守卫功能，用于控制路由的访问权限等。
- 编程式导航：通过 JavaScript 代码实现路由跳转。
- 命名路由和命名视图：便于更灵活地配置和使用路由。
二、Vue Router 的安装与配置
2.1 安装 Vue Router
在 Vue 3 项目中，通过 npm 或 yarn 安装 Vue Router（需安装 4.x 版本，适配 Vue 3）：
# 使用 npmnpm install vue-router@4# 使用 yarnyarn add vue-router@42.2 基本配置
首先，创建路由配置文件，定义路由规则；然后，在入口文件中创建路由实例并挂载到应用。
步骤 1：创建路由配置文件
// 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// 也可以使用懒加载的方式导入组件（推荐）// component: () => import('../views/About.vue')}]// 创建路由实例const router = createRouter({// 路由模式：createWebHistory 是 HTML5 history 模式（无 # 号）// 另一种是 createWebHashHistory（有 # 号）history: createWebHistory(),routes // 路由规则})export default router懒加载组件的方式可以减小初始打包体积，提高页面加载速度，推荐在实际项目中使用。
步骤 2：在入口文件中挂载路由
// main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router' // 导入路由实例import { createPinia } from 'pinia'const app = createApp(App)const pinia = createPinia()app.use(pinia)app.use(router) // 挂载路由app.mount('#app')步骤 3：在根组件中添加路由出口
路由出口（<router-view>）是路由对应的组件渲染的位置，需要在根组件（通常是 App.vue）中添加：
<!-- App.vue --><template><div id="app"><!-- 路由导航链接 --><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><!-- 路由出口：匹配的组件将在这里渲染 --><router-view /></div></template><style>/* 可以为激活的路由链接添加样式 */router-link.active {color: red;text-decoration: none;}</style><router-link> 用于生成路由导航链接，to 属性指定目标路由路径。默认会被渲染为 <a> 标签，当路由匹配时，会自动添加 active 类，便于设置激活样式。
三、路由跳转与参数传递
3.1 声明式导航（<router-link>）
通过 <router-link> 标签实现路由跳转，适用于模板中的静态导航。
基本用法
<template><div><!-- 直接指定路径 --><router-link to="/">首页</router-link><!-- 使用路由名称（配合 params 传递参数时必须使用名称） --><router-link :to="{ name: 'About' }">关于我们</router-link></div></template>传递参数
可以通过路由路径的动态片段（params）或查询字符串（query）传递参数。
params 参数（动态路由）
首先，在路由规则中定义动态片段（以 : 开头）：
// router/index.jsconst routes = [{path: '/user/:id', // :id 是动态参数name: 'User',component: () => import('../views/User.vue')}]然后，在导航时传递参数：
<template><div><!-- 直接在路径中传递参数 --><router-link to="/user/123">用户 123</router-link><!-- 使用路由名称和 params 传递参数 --><router-link :to="{ name: 'User', params: { id: 456 } }">用户 456</router-link></div></template>在目标组件中获取 params 参数：
<!-- views/User.vue --><template><div><h1>用户页面</h1><p>用户 ID：{{ $route.params.id }}</p></div></template><script setup>import { useRoute } from 'vue-router'// 在组合式 API 中，通过 useRoute 获取路由信息const route = useRoute()console.log('用户 ID：', route.params.id)</script>query 参数（查询字符串）
query 参数类似于 URL 中的查询字符串（如 ?name=张三&age=20），无需在路由规则中定义，直接传递即可：
<template><div><router-link :to="{ path: '/search', query: { keyword: 'vue', page: 1 } }">搜索</router-link></div></template>在目标组件中获取 query 参数：
<!-- views/Search.vue --><template><div><h1>搜索页面</h1><p>关键词：{{ $route.query.keyword }}</p><p>页码：{{ $route.query.page }}</p></div></template><script setup>import { useRoute } from 'vue-router'const route = useRoute()console.log('搜索关键词：', route.query.keyword)</script>3.2 编程式导航（router.push）
通过 JavaScript 代码调用 router.push 方法实现路由跳转，适用于需要在事件处理或逻辑判断后进行导航的场景。
在组合式 API 中，通过 useRouter 获取路由实例：
<template><div><button @click="goToHome">前往首页</button><button @click="goToUser">前往用户页面</button><button @click="goToSearch">前往搜索页面</button></div></template><script setup>import { useRouter } from 'vue-router'// 获取路由实例const router = useRouter()// 前往首页const goToHome = () => {router.push('/')// 或使用路由名称// router.push({ name: 'Home' })}// 前往用户页面（传递 params 参数）const goToUser = () => {router.push({ name: 'User', params: { id: 789 } })}// 前往搜索页面（传递 query 参数）const goToSearch = () => {router.push({path: '/search',query: { keyword: 'pinia', page: 2 }})}</script>router.push 的参数格式与 <router-link> 的 to 属性一致，可以是字符串路径，也可以是包含 path、name、params、query 等的对象。
四、嵌套路由
嵌套路由用于实现页面的层级结构，例如在父页面中嵌套子页面。
4.1 配置嵌套路由
在路由规则中，通过 children 属性定义子路由：
// router/index.jsconst routes = [{path: '/dashboard',name: 'Dashboard',component: () => import('../views/Dashboard.vue'),// 子路由children: [{// 子路由的 path 可以不带 /，表示相对父路由路径path: 'profile',name: 'Profile',component: () => import('../views/Profile.vue')},{path: 'settings',name: 'Settings',component: () => import('../views/Settings.vue')}]}]4.2 在父组件中添加子路由出口
父组件需要包含 <router-view> 作为子路由的出口，子路由对应的组件会渲染到这里：
<!-- views/Dashboard.vue --><template><div><h1>仪表盘</h1><nav><router-link to="/dashboard/profile">个人资料</router-link> |<router-link to="/dashboard/settings">设置</router-link></nav><!-- 子路由出口：子组件会在这里渲染 --><router-view /></div></template>访问 /dashboard/profile 时，Profile 组件会渲染到 Dashboard 组件的 <router-view> 中；访问 /dashboard/settings 时，Settings 组件会渲染到该位置。
五、路由守卫
路由守卫用于在路由导航过程中进行拦截和控制，例如验证用户登录状态、权限检查等。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫。
5.1 全局前置守卫（beforeEach）
全局前置守卫会在每次路由跳转前触发，适用于全局的权限控制。
// router/index.jsimport router from './index'router.beforeEach((to, from, next) => {// to：即将要进入的目标路由对象// from：当前正要离开的路由对象// next：函数，决定是否继续导航console.log('即将从', from.path, '跳转到', to.path)// 示例：判断用户是否登录，未登录则跳转到登录页const isLogin = localStorage.getItem('isLogin') === 'true'// 不需要登录的路由白名单const whiteList = ['/login']if (whiteList.includes(to.path)) {// 白名单路由，直接放行next()} else {if (isLogin) {// 已登录，放行next()} else {// 未登录，跳转到登录页next('/login')}}})next 函数的用法：
- next()：继续导航到目标路由。
- next('/path') 或 next({ path: '/path' })：跳转到指定路由。
- next(false)：中断当前导航。
5.2 组件内守卫
组件内守卫包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave，定义在组件内部。
<!-- views/Profile.vue --><template><div><h1>个人资料</h1></div></template><script setup>import { onBeforeRouteEnter, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'// 进入组件前触发（此时组件实例还未创建，不能使用 this 或 setup 中的变量）onBeforeRouteEnter((to, from, next) => {console.log('即将进入个人资料页面')// 可以通过 next 的回调函数访问组件实例next(vm => {// vm 是组件实例console.log('组件实例：', vm)})})// 组件更新时触发（例如路由参数变化但组件复用）onBeforeRouteUpdate((to, from, next) => {console.log('个人资料页面路由参数发生变化')next()})// 离开组件时触发onBeforeRouteLeave((to, from, next) => {console.log('即将离开个人资料页面')// 示例：提示用户是否保存修改const isSave = confirm('是否保存修改？')if (isSave) {next()} else {// 取消离开next(false)}})</script>六、总结
Vue Router 是 Vue 3 构建单页面应用的核心工具，通过本文的学习，我们掌握了其基本概念、安装配置、路由跳转与参数传递、嵌套路由和路由守卫等核心功能。
在实际开发中，合理规划路由结构、使用懒加载优化性能、通过路由守卫控制权限，能够构建出体验良好的单页面应用。后续还可以深入学习命名视图、路由元信息、滚动行为等高级特性，进一步提升路由的使用效率。