vue3种路由守卫详解_vue路由守卫有哪些
1 什么是路由守卫
路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数 。
2 分类
1.全局路由守卫
- beforeEach(to, from, next) 全局前置守卫，路由跳转前触发
- beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
- afterEach(to, from) 全局后置守卫，路由跳转完成后触发
2.路由独享守卫
beforeEnter(to,from,next) 路由对象单个路由配置 ，单个路由进入前触发
3.组件路由守卫
- beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
- beforeRouteUpdadte(to,from,next) 当前路由改变时触发
- beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发
4.参数
to： 即将要进入的目标路由对象
from： 即将要离开的路由对象
next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径
3.详解
1.路由前置守卫 beforeEach(to, from, next)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
12345在路由跳转前触发，在实际项目中应用最多，主要是登陆验证和跳转权限判断
2.全局解析守卫 beforeResolve(to, from, next)
router.beforeResolve((to, from, next) => {
// ...
})
123类似于路由前置守卫 beforeEach(to, from, next)，也是路由跳转前触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的
调用时机：在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后，afterEach(to, from)之前调用
3.全局后置守卫 afterEach(to, from, next)
router.afterEach((to, from) => {
// ...
})
123于路由前置守卫 beforeEach(to, from, next)相对，路由跳转后触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的
调用时机：在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后， beforeRouteEnter(to, from)之前调用
4. 路由独享守卫 beforeEnter(to, from, next)
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
1234567891011于路由前置守卫 beforeEach(to, from, next)相同，但在beforeEach(to, from, next)后触发
5. 组件路由守卫 beforeRouteEnter(to, from, next)
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 不能获取组件实例
// 因为当守卫执行前，组件实例还没被创建
}
123456因为该守卫在组件创建之前阶段触发，那个时候组件还没有创建成功，所以这个守卫内不能使用this获取组件实例
调用时机：在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后，全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用
6. 组件路由守卫 beforeRouteUpdate(to, from, next)
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例
},
123456调用时机：在当前路由复用时
7. 组件路由守卫 beforeRouteLeave(to, from, next)
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例
}
}
12345通常用来禁止用户在还未保存修改前突然离开
调用时机：导航离开该组件的对应路由时调用
4.完整的导航解析流程
1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数
参考链接
5.实际应用
router.beforeEach((to, from, next) => {
NProgress.start(); // NProgress实现显示加载进度条效果
console.log("routemgr to", to.path);
if ("这里判断是不是开发环境") {
//开发环境下，直接路由
next();
} else {
if (to.path == "/login") {
//登录页面
session.set("isOpen", "ok");
next();
} else if ("这里判断如不是生产环境下录页面需要判断权限") {
//非生产环境下
next();
} else {
//非登录页面需要判断权限
console.log("routemgr user", lu.userinfo);
if (gadget.isEmptyObject(lu.userinfo)) {
//首次打开页面的时候，不需要弹出错误页面提示，直接跳转至登录页面即可
let ret = session.get("isOpen");
if (ret == "ok") {
//vuex用户信息判断，如果不存在，则重新登录
MessageBox.alert("用户未登录,需要重新登录.", "错误", {
confirmButtonText: "确定",
type: "error",
}).then(() => {
console.log("重新登录");
//next(`/procmgr/login?redirect=${to.path}`);
next(`/login`);
NProgress.done();
});
} else {
next(`/login`);
NProgress.done();
}
} else {
//权限判断
}
}
}
}