Vue 3.0 中的路由导航守卫详解

1. 路由导航守卫

1.1. 全局前置守卫

Vue-Router 提供的导航守卫主要用来守卫路由的跳转或取消。它们可以植入到全局、单个路由或组件级别。

全局前置守卫可以使用 router.beforeEach 注册：

const router = createRouter({... });router.beforeEach((to, from) => {// 返回 false 以取消导航return false;
});

当导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，导航会等待所有守卫解析完成后才会继续。

守卫方法参数：

to：即将要进入的目标路由对象。

from：当前导航正要离开的路由对象。

返回值：

false：取消当前导航。如果浏览器的 URL 改变了，URL 会重置到 from 路由对应的地址。

路由地址：重定向到一个不同的地址，如同调用 router.push()。

undefined 或 true：导航有效，继续下一步。

router.beforeEach(async (to, from) => {if (!isAuthenticated && to.name !== 'Login') {// 将用户重定向到登录页面return { name: 'Login' };}
});

1.2. 全局解析守卫

全局解析守卫在导航被确认之前调用，可以使用 router.beforeResolve 注册。这适用于获取数据或执行其他操作的场景：

router.beforeResolve(async to => {if (to.meta.requiresCamera) {try {await askForCameraPermission();} catch (error) {if (error instanceof NotAllowedError) {// 处理错误并取消导航return false;} else {// 抛出意料之外的错误并取消导航throw error;}}}
});

1.3. 全局后置钩子

全局后置钩子不会改变导航，只执行一些辅助功能，如分析、改变页面标题等：

router.afterEach((to, from) => {sendToAnalytics(to.fullPath);
});

1.4. 路由独享守卫

可以在路由配置中直接定义 beforeEnter 守卫，仅在进入路由时触发：

const routes = [{path: '/users/:id',component: UserDetails,beforeEnter: (to, from) => {// 拒绝导航return false;},},
];

1.5. 组件内的守卫

在路由组件内直接定义守卫，包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave：

export default {beforeRouteEnter(to, from, next) {// 在路由改变前调用，无法访问组件实例},beforeRouteUpdate(to, from) {// 在当前路由改变时调用，实例已挂载},beforeRouteLeave(to, from) {// 在导航离开前调用},
};

使用 beforeRouteEnter 守卫访问组件实例，可以通过传递回调给 next：

beforeRouteEnter(to, from, next) {next(vm => {// 通过 `vm` 访问组件实例});
}

1.6. 使用组合 API

如果使用组合式 API，可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 添加 update 和 leave 守卫。

2. 完整的导航解析流程

1. 导航被触发；

2. 调用失活组件的 beforeRouteLeave 守卫；

3. 调用全局的 beforeEach 守卫；

4. 调用重用组件的 beforeRouteUpdate 守卫；

5. 调用路由配置中的 beforeEnter；

6. 解析异步路由组件；

7. 调用被激活组件的 beforeRouteEnter 守卫；

8. 调用全局的 beforeResolve 守卫；

9. 导航被确认；

10. 调用全局的 afterEach 钩子；

11. 触发 DOM 更新；

12. 调用 beforeRouteEnter 守卫中传递给 next 的回调函数，访问组件实例；

3. 路由元信息

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段：

const routes = [{path: '/posts',component: PostsLayout,children: [{path: 'new',component: PostsNew,// 只有经过身份验证的用户才能创建帖子meta: { requiresAuth: true },},{path: 'id',component: PostsDetail,// 任何人都可以阅读文章meta: { requiresAuth: false },}]}
];

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，它可能匹配多个路由记录，匹配成功的路由包括父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 route 对象的route.matched 数组。我们需要遍历这个数组来检查路由记录中的 meta 字段，但是 Vue Router 还为你提供了一个 route.meta 方法，它是一个非递归合并所有 meta 字段的方法。这意味着你可以简单地写成：

router.beforeEach((to, from) => {// 而不是去检查每条路由记录// to.matched.some(record => record.meta.requiresAuth)if (to.meta.requiresAuth && !auth.isLoggedIn()) {// 此路由需要授权，请检查是否已登录// 如果没有，则重定向到登录页面return {path: '/login',// 保存我们所在的位置，以便以后再来query: { redirect: to.fullPath },}}
})

4. 路由懒加载

当打包构建应用时，JavaScript 包含变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：

// import UserDetails from './views/UserDetails.vue' 
// 将上面的写法换成下面这样const UserDetails = () => import('./views/UserDetails.vue')const router = createRouter({routes: [{ path: '/users/:id', component: UserDetails },// 或在路由定义里直接使用它{ path: '/users/:id', component: () => import('./views/UserDetails.vue') }]
})