第四章：Vue Router

核心目标：掌握单页面应用（SPA）的路由原理，实现复杂的嵌套路由管理，并利用导航守卫构建严密的权限控制体系。

📋 本章核心知识点

4.1 SPA 路由：为什么页面不刷新？

4.1.1 传统 MPA vs 现代 SPA

• MPA (多页面应用)：每次点击链接，浏览器都会向服务器请求一个全新的 HTML。
• SPA (单页面应用)：整个应用只有一个 HTML。点击链接时，JavaScript 会拦截请求，仅替换页面中的一部分内容，并同步更新浏览器地址。

4.1.2 路由模式

1. Web History 模式（推荐）：
   • URL 看起来很像正常的地址example.com/user/1。
   • 注意：部署时需要后端配合配置重定向，否则刷新 404。
2. Web Hash 模式：
   • URL 中包含#号，如example.com/#/user/1。
   • 优点：不需要后端配置，兼容性极好。

4.2 导航守卫：路由的“保安”

导航守卫是路由系统中最强大的功能，它允许我们在导航发生前拦截并执行逻辑。

4.2.1 全局前置守卫 (beforeEach)

这是实现权限校验的最佳位置。

router.beforeEach((to,from)=>{// 检查目标路由是否需要登录if(to.meta.requiresAuth&&!isLoggedIn()){return{path:'/login'}// 重定向到登录页}})

4.2.2 完整的导航生命周期

当点击链接到加载组件，Vue Router 执行顺序如下：

1. 失活组件：onBeforeRouteLeave
2. 全局前置：beforeEach
3. 路由独享：beforeEnter
4. 解析组件：beforeRouteEnter
5. 全局后置：afterEach

4.3 编程式导航 vs 声明式导航

• 声明式：使用<RouterLink to="/home">。它本质上渲染为一个<a>标签，但会被 Vue Router 拦截。
• 编程式：使用router.push('/home')。通常用于逻辑执行后的跳转（如登录成功后转入首页）。

4.4 路由元信息 (Meta)

meta是一个灵活的对象，可以承载任何自定义数据。

• requiresAuth: 是否需要登录。
• title: 页面网页标题。
• transition: 页面切换的具体动画名称。

4.5 性能优化：组件懒加载

通过动态导入（Dynamic Import），我们可以实现组件的按需加载，大幅减少首屏 JS 的体积。

constUserProfile=()=>import('./views/UserProfile.vue')

📌 章节实战建议

1. 参数解耦：在路由配置中使用props: true，将 URL 参数直接作为 Props 传给组件，避免组件过度依赖$route对象。
2. 加载反馈：在全局守卫中配合NProgress插件，在路由切换时展示顶部的加载进度条。
3. 返回策略：合理使用router.replace代替router.push，防止产生过多的历史记录（如登录成功重定向后，不希望用户点击后退回到登录页）。

🔗专栏链接：Vue 3 全栈开发实战专栏
📦项目源码资源：点击下载项目源码