一、前言
随着 Vue.js 在前端开发中的广泛应用，Vue Router 成为了 Vue 官方推荐的路由管理器。它不仅支持单页面应用（SPA）中常见的路由跳转、嵌套路由、懒加载等功能，还提供了导航守卫、动态路由等高级特性。
本文将带你深入了解：
- Vue Router 的基本概念；
- 路由配置与使用方式；
- 嵌套路由与命名视图；
- 动态路由与懒加载；
- 导航守卫机制；
- 实际开发中的典型使用场景；
通过这篇文章，你将掌握 Vue Router 的核心功能与原理，能够熟练地在项目中进行路由管理。
二、什么是 Vue Router？
Vue Router 是 Vue.js 官方的路由管理库，用于构建单页应用（SPA），实现不同组件之间的切换和导航。
✅ 核心功能：
| 功能 | 描述 |
|---|---|
| 路由映射 | 将路径映射到组件 |
| 组件切换 | 不刷新页面切换组件 |
| 参数传递 | 支持动态路由参数（如 /user/:id） |
| 嵌套路由 | 实现父子级组件结构 |
| 懒加载 | 异步加载组件，提升性能 |
| 导航守卫 | 控制路由跳转逻辑（权限验证、登录拦截等） |
三、Vue Router 的安装与配置
✅ 安装（Vue 3）
npm install vue-router@4✅ 创建路由实例（router/index.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✅ 在 main.js 中挂载路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')四、基础使用：路由跳转与组件渲染
✅ <router-link>：声明式导航
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>✅ <router-view>：动态渲染组件的位置
<router-view />📌 效果：
- 点击链接时，不会刷新页面；
- 页面内容根据当前路径自动切换为对应组件；
五、动态路由与参数传递
✅ 动态路由示例
{path: '/user/:id',name: 'User',component: () => import('../views/User.vue')
}✅ 在组件中获取参数
export default {mounted() {console.log(this.$route.params.id)}
}📌 示例 URL：
/user/123→this.$route.params.id === '123'
六、嵌套路由（父子路由）
适用于多级菜单、布局嵌套等场景。
✅ 路由配置
{path: '/dashboard',name: 'Dashboard',component: DashboardLayout,children: [{path: 'profile',component: Profile},{path: 'settings',component: Settings}]
}✅ 页面结构
<!-- DashboardLayout.vue -->
<template><div><h2>仪表盘布局</h2><router-view /> <!-- 子路由组件在这里显示 --></div>
</template>📌 访问路径：
/dashboard/profile/dashboard/settings
七、命名视图（多个 <router-view>）
适用于需要在同一页面展示多个组件区域，例如侧边栏 + 主体内容。
✅ 路由配置
{path: '/layout',components: {default: MainContent,sidebar: SideBar}
}✅ 模板中使用多个 <router-view>
<router-view />
<router-view name="sidebar" />八、懒加载组件（按需加载）
懒加载是优化首屏加载速度的重要手段，Vue Router 支持异步加载组件。
✅ 使用 import() 实现懒加载
{path: '/contact',name: 'Contact',component: () => import('../views/Contact.vue')
}📌 特点：
- 只有访问该路由时才会加载对应的组件；
- 减少初始加载时间，提升用户体验；
九、导航守卫（Navigation Guards）
导航守卫用于控制路由的跳转逻辑，常用于权限验证、登录拦截、页面缓存等场景。
✅ 全局前置守卫：beforeEach
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next('/login') // 未登录跳转登录页} else {next()}
})✅ 路由独享守卫：beforeEnter
{path: '/profile',name: 'Profile',component: Profile,beforeEnter: (to, from, next) => {if (checkPermission(to.params.id)) {next()} else {next('/')}}
}✅ 组件内守卫
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
export default {beforeRouteLeave(to, from, next) {const answer = window.confirm('确定离开吗？数据可能未保存。')if (answer) {next()} else {next(false)}}
}十、编程式导航（JS 控制跳转）
除了使用 <router-link> 进行跳转外，还可以通过 JS 方式实现导航。
// 字符串路径
this.$router.push('/home')// 命名路由 + 参数
this.$router.push({ name: 'User', params: { id: 123 } })// 替换当前历史记录（不产生新记录）
this.$router.replace('/login')十一、常见问题与解决方案
| 问题 | 解决方案 |
|---|---|
| 路由跳转后页面不更新 | 使用 key 属性强制重新渲染组件 |
获取不到 $route 或 $router | 确保组件已正确注册并处于 <router-view> 内 |
| 动态添加路由无效 | 使用 router.addRoute() 方法 |
多个 <router-view> 不生效 | 检查是否遗漏了 name 属性或拼写错误 |
| 导航守卫无法阻止跳转 | 检查是否调用了 next() 并正确返回结果 |
十二、总结对比表
| 功能 | 推荐方式 |
|---|---|
| 基础路由跳转 | <router-link> + <router-view> |
| 动态路由传参 | params / query |
| 嵌套组件结构 | children 配置 |
| 多视图展示 | 命名 <router-view> |
| 按需加载组件 | () => import(...) |
| 权限控制 | 全局/路由/组件守卫 |
| 编程式跳转 | router.push() / replace() |
| 推荐程度 | ✅✅ 强烈推荐掌握 |
十三、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！
