标题 | 详情 |
---|---|
作者简介 | 愚公搬代码 |
头衔 | 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。 |
近期荣誉 | 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。 |
博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
欢迎 | 👍点赞、✍评论、⭐收藏 |
文章目录
🚀前言
在现代单页面应用(SPA)的开发中,确保用户体验的流畅性和安全性是至关重要的。而 Vue Router 作为 Vue.js 的官方路由管理工具,提供了强大的路由导航守卫功能,让我们能够在路由切换的不同阶段进行各种控制和处理。通过导航守卫,我们可以轻松地管理用户的访问权限、数据加载、路由跳转前的验证等,确保应用的稳定与安全。
本文将深入探讨 Vue Router 的路由导航守卫,包括全局守卫、路由独享守卫和组件内守卫的使用方法。我们将详细讲解每种守卫的作用、使用场景,并通过实际案例展示如何在路由切换前后进行各种逻辑处理。无论是保护敏感页面的访问,还是在切换路由前进行数据预取,导航守卫都能为我们的应用提供强有力的支持。
🚀一、Vue Router的路由导航守卫
在 Vue Router 中,导航守卫主要用于在路由跳转过程中,决定是否允许或阻止某次跳转。通过这些守卫,可以实现权限控制、数据加载等功能。
🔎1. 全局导航守卫
全局导航守卫是指在应用级别设置的守卫,所有路由的跳转都会经过这些守卫。常用的全局守卫有 beforeEach
(前置守卫)和 afterEach
(后置守卫)。
🦋1.1 定义全局前置导航守卫
通过 beforeEach
方法,可以为路由实例注册一个全局的前置守卫。每当发生路由跳转时,beforeEach
方法都会被触发。
示例代码:
const router = createRouter({
history: createWebHashHistory(),
routes: routes // 我们定义的路由配置对象
});
router.beforeEach((to, from) => {
// 将要跳转到的路由对象
console.log(to);
// 当前将要离开的路由对象
console.log(from);
// 返回 true 表示允许此次跳转,返回 false 表示禁止此次跳转
return false; // 这样所有的路由跳转都会被禁止
});
在上面的代码中,beforeEach
方法的返回值可以是布尔值。如果返回 false
,导航会被阻止。如果返回 true
,导航会继续。如果返回的是一个路由配置对象,可以实现路由重定向。
例如,假设我们需要检查用户的登录状态,如果没有登录,则重定向到登录页面:
const router = createRouter({
history: createWebHashHistory(),
routes: routes
});
router.beforeEach((to, from) => {
if (to.name !== 'setting') { // 如果不是跳转到 'setting' 路由
return { name: 'setting', params: { id: '000' } }; // 重定向到 'setting' 路由
}
});
🦋1.2 定义全局后置导航守卫
全局后置守卫 afterEach
允许你在导航完成后执行某些操作。与前置守卫不同,后置守卫不会影响导航的结果,它更多用于页面分析或监控。
示例代码:
const router = createRouter({
history: createWebHashHistory(),
routes: routes
});
router.afterEach((to, from, failure) => {
console.log("跳转结束");
console.log(to); // 当前跳转到的路由
console.log(from); // 当前离开的路由
console.log(failure); // 如果导航失败,记录失败原因
});
在 afterEach
中,除了接收 to
和 from
参数外,还接收 failure
参数。failure
用于记录导航异常信息。
🔎2. 为特定路由注册导航守卫
除了全局守卫,还可以为特定的路由设置导航守卫。这些守卫只会在访问某些路由时触发。
🦋2.1 在路由配置中使用 beforeEnter
在路由配置中,可以使用 beforeEnter
属性来为特定的路由配置守卫。beforeEnter
只会在进入该路由时触发,而不会在路由参数变化时触发。
示例代码:
const routes = [
{
path: "/demo1",
component: Demo,
name: 'Demo',
beforeEnter: (to, from) => {
console.log("进入 '/demo1' 路由");
return false; // 阻止跳转
}
}
];
在上述代码中,当用户访问 /demo1
路由时,beforeEnter
守卫会被触发,并且返回 false
阻止跳转。
🦋2.2 在组件中使用导航守卫
在组件内部,可以使用 onBeforeRouteUpdate
、onBeforeRouteLeave
和 onBeforeRouteEnter
来实现导航守卫。
onBeforeRouteUpdate
:当路由参数变化时(例如,通过 URL 改变参数),会触发该方法。
import { onBeforeRouteUpdate } from 'vue-router';
onBeforeRouteUpdate((to, from) => {
console.log("路由参数更新时的守卫");
console.log(to, from);
});
onBeforeRouteLeave
:当离开当前页面时触发。常用于提示用户是否保存数据。
import { onBeforeRouteLeave } from 'vue-router';
onBeforeRouteLeave((to, from) => {
console.log("离开当前页面时的守卫");
console.log(to, from);
});
onBeforeRouteEnter
:在进入路由之前触发。需要注意的是,onBeforeRouteEnter
在组件实例尚未创建时就被调用,因此不能直接访问组件实例。
import { onBeforeRouteEnter } from 'vue-router';
onBeforeRouteEnter((to, from) => {
console.log("进入当前页面时的守卫");
console.log(to, from);
});
🔎3. Vue Router 导航流程总结
Vue Router 导航跳转的流程如下:
- 导航被触发:可以通过
router-link
、push
等方法或直接改变 URL 触发。 - 进入将要失活的组件:调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 如果当前组件没有变化:调用组件内部的
beforeRouteUpdate
守卫。 - 调用在路由配置中定义的
beforeEnter
守卫。 - 解析异步路由组件。
- 确认导航:完成路由跳转。
- 调用全局的
afterEach
守卫。 - 更新 DOM:页面内容更新,完成跳转。
通过上述流程,可以看到 Vue Router 在处理路由跳转时是非常灵活和可控的。你可以在不同阶段对导航进行拦截、重定向或执行其他逻辑。
🔎4.总结
- 全局导航守卫:
beforeEach
用于前置守卫,afterEach
用于后置守卫。前置守卫决定是否允许跳转,后置守卫用于分析或监控跳转。 - 特定路由守卫:
beforeEnter
可用于为特定路由注册守卫,onBeforeRouteUpdate
和onBeforeRouteLeave
适用于组件级别的守卫。 - 守卫流程:Vue Router 提供了一个完善的导航流程,你可以在每个阶段进行相应的操作。