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); // 不允许进入路由
}
}
}
]
})
组件内的守卫
组件内的守卫用于细粒度的导航控制,直接在组件内定义。
示例:组件内的守卫
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);
}
}
}
通过以上三种方式,我们可以非常灵活地控制Vue项目中的路由导航行为,从而实现各种复杂的业务逻辑。在编写路由守卫时,我们需要注意守卫函数的执行顺序,以及`next`函数的合理使用,确保导航流程符合预期。