如何编写Vue路由守卫 - vue学习-微参考

Vue路由守卫是Vue项目中非常重要的一个功能，它允许我们控制路由的访问权限、导航行为等。Vue路由守卫主要分为全局守卫、路由独享的守卫以及组件内的守卫。下面将详细介绍如何编写这三种类型的路由守卫。

全局守卫

全局守卫适用于整个项目的路由控制，可以在路由配置之前设置。全局守卫有三种：`beforeEach`、`beforeResolve`和`afterEach`。

示例：全局前置守卫

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
// 路由配置
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由
// next: 是一个函数，用于执行管道中的下一个钩子

// 可以在这里进行权限验证、页面访问控制等操作
if (to.path === '/login') {
next();
} else {
// 检查用户是否已登录
const isAuthenticated = true; // 这里用伪代码表示
if (isAuthenticated) {
next();
} else {
next('/login');
}
}
})

// 全局解析守卫
router.beforeResolve((to, from, next) => {
// 与beforeEach类似，但会在所有组件内守卫和异步路由组件被解析之后调用
next();
})

// 全局后置钩子
router.afterEach((to, from) => {
// 这些钩子不会接受next函数，也不会改变导航
// 可以在这里执行一些诸如更改页面标题等操作
})

路由独享的守卫

路由独享的守卫仅作用于特定的路由，在路由配置对象中定义。

示例：路由独享的守卫

const router = new VueRouter({
routes: [
{
path: '/protected',
component: ProtectedComponent,
beforeEnter: (to, from, next) => {
// 在进入这个路由之前执行一些验证
// 类似于全局前置守卫，区别是仅作用于特定路由
if (/* 验证条件 */) {
next();
} else {
next(false); // 不允许进入路由
}
}
}
]
})

组件内的守卫

组件内的守卫用于细粒度的导航控制，直接在组件内定义。

示例：组件内的守卫

如何编写Vue路由守卫

const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被验证前调用
// 不能访问this，因为组件实例还未被创建
next(vm => {
// 通过vm访问组件实例
});
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 适用于动态路由或者路径参数的变化
next();
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以用来禁止用户在还未保存修改前突然离开
const answer = window.confirm('Do you really want to leave? you have unsaved changes!');
if (answer) {
next();
} else {
next(false);
}
}
}