当前位置：首页 > news >正文

前端面经-VUE3篇（三）--vue Router（二)导航守卫、路由元信息、路由懒加载、动态路由

news 2025/5/5 7:49:36

一、导航守卫

vue Router 中的 导航守卫（Navigation Guards） 是一个非常重要的功能，用于在路由切换过程中，拦截、控制、检查或延迟页面跳转。

你可以理解为：

🔐 “进门前的保安”，控制哪些页面可以进入，哪些要被拦下，甚至可以临时让你等一等（如加载数据）。

1、导航守卫是什么？

导航守卫 = 在页面跳转时运行的“钩子函数”，用于：

登录验证（如没登录 → 拦住不让进）
权限判断（普通用户不能进后台）
加载数据（等异步数据加载完再跳转）
保存草稿、弹窗确认（是否离开页面）

2、导航过程中的“六大守卫钩子”

1. 全局守卫（作用于整个路由系统）

全局守卫是指：在所有路由跳转时都会触发的拦截钩子函数，你可以在这里：

检查权限（如登录验证）
记录日志
控制页面跳转流程
加载全局资源
拦截非法路径、错误跳转

1、全局守卫的分类（3种）

守卫名称	执行时机	是否需要调用 `next()`
`beforeEach`	跳转开始前	✅ 是
`beforeResolve`	所有组件守卫解析后	✅ 是
`afterEach`	跳转结束后	❌ 否（只是通知）

1.最常用的：`router.beforeEach()`

router.beforeEach((to, from, next) => {// to: 即将进入的路由// from: 当前离开的路由// next(): 控制是否放行
})

示例：登录拦截

router.beforeEach((to, from, next) => {const isLogin = !!localStorage.getItem('token')if (to.meta.requiresAuth && !isLogin) {next('/login') // 没登录跳转登录页} else {next() // 放行}
})

next() 的几种用法

写法	作用
`next()`	允许正常跳转
`next(false)`	中止导航（地址栏会回退）
`next('/login')`	重定向到其他页面
`next(new Error())`	抛出错误，触发全局错误捕获

`2.beforeResolve()`（较少使用）

router.beforeResolve((to, from, next) => {// 所有 beforeEach、组件 beforeRouteEnter、beforeEnter 都 resolve 后执行next()
})

用途：

等待所有数据加载完再显示加载动画
对所有守卫结果做最后决策

3.`afterEach()`（无 next）

router.afterEach((to, from) => {// 跳转后做事情，如：sendAnalytics(to.path)
})

不能拦截跳转，只是一个通知钩子
用于记录操作、埋点统计、结束 loading 等

2、执行顺序图解

如果你从 /login 跳到 /dashboard：

→ router.beforeEach()
→ 路由配置里的 beforeEnter（如果有）
→ 组件的 beforeRouteEnter（如果有）
→ router.beforeResolve()
→ 页面渲染
→ router.afterEach()

3、实际应用场景

场景	使用钩子
登录状态拦截	`beforeEach`
动态加载权限路由	`beforeEach`
请求加载动画	`beforeResolve`
页面跳转埋点统计	`afterEach`
首次访问重定向	`beforeEach`

2、路由独享守卫（配置在某个路由项中）

1、什么是“路由独享守卫”？

路由独享守卫是定义在某一个路由配置项中的钩子函数，只在进入该路由时触发。

📌 区别于全局守卫，它不会影响其他页面，适合只对特定路由做控制。

语法格式

{path: '/admin',component: AdminPage,beforeEnter(to, from, next) {// 只会在进入 /admin 时触发if (isAdmin()) {next() // 放行} else {next('/no-access') // 重定向}}
}

2、典型用途场景

场景	示例
后台路由权限拦截	`/admin` 只有管理员能进
特定页面加载前校验数据	`/editor` 页面检查草稿是否存在
临时页面的跳转控制	`/event/:id` 检查活动是否开启

3、和全局守卫的区别

点	全局守卫	路由独享守卫
触发时机	所有路由跳转都触发	只在进入某个特定页面时触发
代码位置	路由实例中	单个路由配置项中
使用场景	登录检查、全站控制	单页权限、页面特殊逻辑

示例：后台权限验证

const routes = [{path: '/admin',component: AdminView,beforeEnter(to, from, next) {const user = getUserInfo()if (user.role === 'admin') {next()} else {next('/403')}}}
]

4、注意事项

如果你既使用了全局守卫又用了路由独享守卫，它们是串联执行的。
路由独享守卫在组件还没创建时就执行，因此不能访问组件实例 this。

3. 组件内守卫（定义在组件中）

1、什么是组件内守卫？

组件内守卫是直接定义在组件内部的路由钩子函数，用于在“进入当前组件”、“更新当前组件参数”或“离开当前组件”时执行逻辑。

它和全局守卫 / 路由独享守卫相比，更适用于组件内部逻辑控制，如弹窗提示、数据加载、组件状态管理等。

2、组件内三种守卫（使用时机）

守卫名	触发时机	常见用途
`beforeRouteEnter`	即将进入组件前（组件还未创建）	判断是否允许进入、等数据加载完
`beforeRouteUpdate`	同组件但路由参数变化时	响应式更新组件内容
`beforeRouteLeave`	离开当前组件时	弹窗确认、保存草稿

示例讲解

1. `beforeRouteEnter(to, from, next)`

📌 组件还没创建，所以你不能访问 this！

export default {beforeRouteEnter(to, from, next) {// 在进入该组件前执行console.log('准备进入这个组件')// 如果你需要访问组件实例，可以这样写：next(vm => {console.log('组件实例是：', vm)})}
}

2. `beforeRouteUpdate(to, from, next)`

📌 组件已经渲染，只是参数变了

常用于如 /user/1 → /user/2 的这种路径变化

export default {beforeRouteUpdate(to, from, next) {// 当 :id 参数变化时触发this.userId = to.params.idthis.fetchData()next()}
}

`3.beforeRouteLeave(to, from, next)`

📌 离开当前组件前触发

常用于弹窗确认：

export default {beforeRouteLeave(to, from, next) {if (this.formChanged) {const answer = window.confirm('你有未保存的更改，确定离开？')if (!answer) return next(false)}next() // 放行}
}

3、注意事项

beforeRouteEnter 无法访问 this，必须用 next(vm => {...}) 才能访问组件实例。
如果你使用的是 <script setup>，这些守卫要通过 onBeforeRouteLeave() 等组合式 API 来注册。

3、守卫执行顺序图解

假设你从 /a → /b，执行顺序是：

1. 全局 beforeEach
2. 路由 beforeEnter
3. 组件 beforeRouteLeave（离开 a）
4. 组件 beforeRouteEnter（进入 b）
5. 全局 beforeResolve
6. 页面渲染
7. 全局 afterEach

4、常见坑点

错误用法	正确说明
`next()` 忘记写	会导致跳转永远卡住
`beforeRouteEnter` 中访问 `this`	不行！因为组件还没被创建，用 `next(vm => {...})`
`beforeRouteUpdate` 不写	跳转到相同组件（比如 `user/1` → `user/2`）时，页面不会更新
异步未处理错误	加 try/catch，或者重定向到错误页

二、路由元信息

Vue Router 中的路由元信息（meta）是一个非常强大但简单的功能，常用于在路由配置中添加额外的自定义数据，比如：

是否需要登录权限
当前页面的标题
页面缓存控制
菜单显示图标
动态路由权限判断

1、什么是路由元信息？

meta 是路由对象中的一个可选字段，用于存储自定义的附加信息，Vue Router 不会主动使用，但你可以在导航守卫、组件中等地方访问并利用它。

语法结构示例

{path: '/admin',component: AdminView,meta: {requiresAuth: true,title: '管理后台',icon: 'admin-icon',cache: true}
}

这段配置的含义就是：

访问 /admin 时，需要登录
页面标题是“管理后台”
菜单显示图标为 admin-icon
页面可以缓存

2、怎么访问 meta？

你可以通过 route.meta 来访问元信息：

1. 在全局导航守卫中：
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isLoggedIn()) {next('/login')} else {next()}
})2. 在组件中访问：
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.meta.title) // 页面标题

3、典型应用场景（非常实用）

应用场景	用法示例
登录权限控制	`meta: { requiresAuth: true }`
页面标题设置	`meta: { title: '首页' }`
动态菜单渲染	`meta: { icon: 'home', hidden: false }`
缓存控制	`meta: { cache: true }` 配合 keep-alive
用户角色权限	`meta: { roles: ['admin', 'editor'] }`
是否展示标签页	`meta: { tag: true }`（多标签页路由）

4、注意事项

项目	说明
`meta` 是用户自定义的	Vue Router 不会解释它，你自己怎么用都行
子路由也可以有 meta	如果没有，你可以继承父路由的 meta
需要在组件或守卫中访问 route 对象	使用 `useRoute()` 获取当前路由信息

meta 是 Vue Router 路由配置中的“万能自定义字段”，你可以往里面塞权限标记、页面标题、缓存控制、菜单信息等任意逻辑，再通过路由守卫或组件动态处理。

三、 `<RouterView>` 插槽

RouterView 是 Vue Router 提供的内置组件，专门用来渲染“命中的子路由组件”。
而它的插槽（slot）机制，让我们可以更灵活地控制它所渲染的内容。

从 Vue Router 4 开始，<RouterView> 支持默认插槽和作用域插槽。

1、使用插槽做什么？

通过插槽你可以：

用途	说明
✨ 页面过渡动画	为切换的路由组件加动画
🌀 加载指示器	在组件未加载前显示 loading
🎯 动态包装	自定义如何渲染子组件，例如加布局、卡片框等

2、插槽语法

<RouterView v-slot="{ Component, route }"><!-- 自定义展示方式 -->
</RouterView>变量	说明
Component	当前要渲染的子路由组件
route	当前激活的路由对象（等同于 useRoute()）

示例：为路由组件加过渡动画

<RouterView v-slot="{ Component }"><Transition name="fade"><component :is="Component" /></Transition>
</RouterView>
📌 解释：你接管了 RouterView 默认渲染行为自己通过 <component :is="Component" /> 渲染它可插入 <Transition> 包裹来加动画

3、使用场景总结

场景	解决问题
组件加载前展示 loading	配合 `<Suspense>`
切换页面时添加过渡动画	用 `<Transition>`
自定义布局结构包装组件	外层加卡片/容器等
统一处理错误提示	在外层判断并渲染 fallba

三、路由懒加载

路由懒加载（Route Lazy Loading） 是 Vue Router 中的一个优化技巧，主要目的是：

✅ 将路由组件按需加载，而不是一次性全部加载，从而提升首页加载速度、减少初始包体积、加快页面响应。

1、什么是“懒加载”？

懒加载（Lazy Load）就是在用户访问某个路由时才去加载对应的组件代码。

不是在一开始加载整个应用时就加载所有路由页面，而是需要时再加载、用完即用。

2、为什么需要懒加载？

不懒加载时会发生什么？

项目中所有页面组件在第一次打开应用时全部加载
首屏加载时间变慢（特别是页面很多时）
用户可能只访问其中某几个页面，却加载了所有组件

3、懒加载的实现方式

传统方式（同步加载）

import Home from '@/views/Home.vue'const routes = [{ path: '/', component: Home }
]缺点：Home.vue 会在页面初始化时就被加载

推荐方式：使用 `import()` 动态导入

const Home = () => import('@/views/Home.vue')const routes = [{ path: '/', component: Home }
]

这个语法的核心：

import() 返回一个 Promise
Vue 会把这个组件单独打包成一个 懒加载 chunk
当你访问 / 时，它才会发起网络请求下载该页面代码

4、懒加载适合什么项目？

项目类型	是否建议使用懒加载
小型 SPA，页面少	不强制，可选
多页面、功能复杂	✅ 强烈建议懒加载
管理系统、CMS、商城	✅ 一定要懒加载
首屏要极快响应	✅ 可只加载核心页面，其它懒加载

四、动态路由

1、什么是动态路由？

动态路由是指：你可以在路由路径中定义“参数变量”，从而匹配不同的 URL，渲染相同的组件但显示不同的内容。

基础语法

路由配置：

{path: '/user/:id',component: UserDetail
}
:id 是一个动态路径参数访问 /user/1、/user/2 会匹配同一个路由，但参数不同

在组件中获取动态参数

在 <script setup> 中：

import { useRoute } from 'vue-router'const route = useRoute()
console.log(route.params.id) // 输出当前的用户 ID
你可以用它去请求对应用户的数据：
const res = await fetch(`/api/user/${route.params.id}`)

动态参数更新时自动响应

问题：

访问 /user/1 后，再跳转 /user/2，组件不会重新创建，这时你要用：

import { onBeforeRouteUpdate, useRoute } from 'vue-router'const route = useRoute()onBeforeRouteUpdate((to, from, next) => {// 监听参数变化fetchData(to.params.id)next()
})

或者使用 <watch> 监听 route 变化。

props 配合动态参数（推荐做法）

路由配置：
{path: '/user/:id',component: UserDetail,props: true
}
✅ 组件中直接用 props 接收参数：<script setup>
const props = defineProps(['id'])
</script>
这样你无需手动解析 useRoute()，更干净、易测试。

2、什么是动态路由添加？

通俗解释：

动态路由添加就是：在运行时动态注册新的路由，而不是一开始就写死在 routes 里。

常见于以下场景：

登录后根据权限动态添加路由
加载某个模块时再注册其页面路由
插件/微前端中按需注册子应用路由

动态添加路由的基本方法：router.addRoute()

router.addRoute({ path: '/about', component: About })
这样会将 /about 的路由 添加进当前路由系统中。

🧠 但注意：
如果你当前已经在 /about 页面上了，它会继续显示之前的匹配结果，比如 /:articleName，因为 Vue Router 只在切换路由时重新匹配！

解决办法：

// 添加新路由
router.addRoute({ path: '/about', component: About })
// 替换当前路径以强制重新匹配
router.replace(router.currentRoute.value.fullPath)这样 Vue Router 才会重新匹配新添加的 /about 路由，并正确渲染 About 组件。

3、在导航守卫中动态添加路由

动态加载路由的同时判断是否已有该路由，并触发重定向。

router.beforeEach(to => {if (!hasNecessaryRoute(to)) {router.addRoute(generateRoute(to))   // 添加路由return to.fullPath                   // 触发重定向}
})

📌 解释：

hasNecessaryRoute()：判断当前要访问的路由是否已经注册
如果没有 → 添加 → 返回 to.fullPath 触发跳转（类似 next(to.fullPath)）

🔁 必须小心处理递归添加/跳转，以防无限重定向

4、如何删除路由？

✅ 方式一：名字相同会覆盖

router.addRoute({ name: 'about', path: '/about', component: About })
router.addRoute({ name: 'about', path: '/other', component: Other })
// 原来的 'about' 路由会被删除，新的替代

方式二：使用 `addRoute()` 返回的函数

const remove = router.addRoute({ path: '/settings', component: Settings })
remove() // 取消注册该路由
适合用于组件挂载时注册、卸载时移除。

方式三：显式调用 `router.removeRoute(name)`

router.removeRoute('about')
⚠️ 只能删除命名路由

5、动态添加嵌套路由（children）

// 添加父路由
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// 向 admin 路由添加子路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })
等价于：
{name: 'admin',path: '/admin',component: Admin,children: [{ path: 'settings', component: AdminSettings }]
}

动态嵌套路由常用于：

模块懒加载时
子模块按需注册

6、查看和判断当前路由表

Vue Router 提供两个方法：

方法	功能
`router.hasRoute(name)`	判断某个命名路由是否存在
`router.getRoutes()`	获取所有当前注册的路由（包括

示例

// 添加
if (!router.hasRoute('dashboard')) {router.addRoute({ name: 'dashboard', path: '/dashboard', component: Dashboard })
}// 删除
if (router.hasRoute('dashboard')) {router.removeRoute('dashboard')
}