vue路由守卫详解

Vue路由守卫

1 什么是路由守卫

路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数 。

2 分类

2-1 全局路由守卫

2-2 路由独享守卫

beforeEnter(to,from,next) 路由对象单个路由配置 ，单个路由进入前触发

2-3 组件路由守卫

2-4 参数

3 详解

3-1 路由前置守卫 beforeEach(to, from, next)

const router = new VueRouter({ 
    ... }) router.beforeEach((to, from, next) => { 
    // ... }) 

在路由跳转前触发，在实际项目中应用最多，主要是登陆验证和跳转权限判断

3-2 全局解析守卫 beforeResolve(to, from, next)

router.beforeResolve((to, from, next) => { 
    // ... }) 

类似于路由前置守卫 beforeEach(to, from, next)，也是路由跳转前触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机：在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后，afterEach(to, from)之前调用

3-3 全局后置守卫 afterEach(to, from, next)

router.afterEach((to, from) => { 
    // ... }) 

于路由前置守卫 beforeEach(to, from, next)相对，路由跳转后触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机：在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后， beforeRouteEnter(to, from)之前调用

3-4 路由独享守卫 beforeEnter(to, from, next)

const router = new VueRouter({ 
    routes: [ { 
    path: '/foo', component: Foo, beforeEnter: (to, from, next) => { 
    // ... } } ] }) 

于路由前置守卫 beforeEach(to, from, next)相同，但在beforeEach(to, from, next)后触发

3-5 组件路由守卫 beforeRouteEnter(to, from, next)

const Foo = { 
    template: `...`, beforeRouteEnter(to, from, next) { 
    // 不能获取组件实例 // 因为当守卫执行前，组件实例还没被创建 } } 

因为该守卫在组件创建之前阶段触发，那个时候组件还没有创建成功，所以这个守卫内不能使用this获取组件实例

调用时机：在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后，全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用

3-6 组件路由守卫 beforeRouteUpdate(to, from, next)

beforeRouteUpdate(to, from, next) { 
    // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 }, 

调用时机：在当前路由复用时

3-7 组件路由守卫 beforeRouteLeave(to, from, next)

 beforeRouteLeave(to, from, next) { 
    // 导航离开该组件的对应路由时调用 // 可以访问组件实例 } 

4 完整的导航解析流程

参考链接

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 { 
    //权限判断 } } } }); 

原文链接：https://blog.csdn.net/_/article/details/