Vue3 路由与导航守卫实战要点
发布于2026-10-26 17:26 阅读11次
梳理 Vue Router 4 的路由挂载、路由元信息权限控制与全局前置守卫写法，重点讲清动态路由刷新丢失、守卫死循环、异步用户信息竞态三个易踩坑，并给出路由级懒加载的代码示例，帮助前端快速搭好带权限的单页应用骨架。
# Vue3 路由与导航守卫实战要点
路由是单页应用的骨架，而导航守卫是控制"谁能进哪扇门"的保安。很多权限 bug 都源于守卫写得不严谨。本文从实操角度梳理 Vue Router 4 的关键点。
## 一、基础挂载
```js
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [{ path: '/login', component: Login }]
})
```
## 二、路由元信息控制权限
在 route 上挂 `meta`：
```js
{ path: '/admin', component: Admin, meta: { requiresAuth: true } }
```
## 三、全局前置守卫
```js
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.token) {
next('/login')
} else {
next()
}
})
```
> ⚠️ **常见错误**：忘记调用 `next()` 会导致页面卡死白屏；在 Vue Router 4 中也可直接 `return '/login'` 替代 `next`。
## 四、三个易踩的坑
1. **动态路由刷新丢失**：`addRoute` 添加的路由在刷新后消失，需在登录后重新注册，或把路由表持久化到本地。
2. **守卫里死循环**：未登录跳 `/login`，但 `/login` 也带了 `requiresAuth`，结果无限重定向。要给登录页单独放行。
3. **异步获取用户信息竞态**：多个路由同时触发守卫，用户信息请求并发，用 `await` 保证拿到后再放行。
## 五、按需加载
```js
component: () => import('./views/Admin.vue')
```
路由级懒加载能把首屏体积砍掉一大半，配合 `meta` 做权限与加载态更顺手。
1
0
文章点评