vue-router 路由守卫

定义

路由钩子函数  在路由跳转时（页面跳转）执行的函数 有一定的顺序

参数

to        你要进入页面的路由

from    你离开的路由

next    next() 函数   必须以这个函数结束有不同的状态   

          next()         正常放行

          next(false)   不容许跳转  返回原来的页面

         next(路由)    跳转到指定的页面

分类

• 组件内的守卫      写在路由级别的组件中

             beforeRouteEnter(to, from, next) { }

                         在 confirm前  渲染该组件的对应路由被调用

                         组件实例还被创建  不能获取组件实例this

                beforeRouteUpdate(to, from, next) { }             // 应用于动态路由的跳转

                        带有动态路由参数的路径 间跳转     /foo/1 和 /foo/2 之间跳转时调用
                         可以访问组件实例 `this`

                beforeRouteLeave(to, from, next) { }    // 应用于离开页面时   阻止跳转
                               该组件的对应路由时调用
                               可以访问组件实例 `this`
 

• 路由独享的守卫

                    const router = new VueRouter({
                             routes: [
                                    {
                                         path: '/foo',      // 路由地址
                                       component: Foo,
                             beforeEnter: (to, from, next) => {  // 路由独享守卫  } 

                       } ]})

• 全局守卫     

                   const router = new VueRouter({ ... })  // 创建路由实例

                               router.beforeEach(function (to, from, next) {    // 前置守卫  
                                       console.log('路由变化了', to, from, next)
                                        next()
                                    })           

          使用 前置守卫进行权限的校验                

                 思路      如果没有登陆就不能访问某些敏感页面(登录页)   

                 如果登陆了，就不能再访问login页面

              跳转到登录后登录页进行的操作

 

                               router.afterEach(function (to, from) {          //后置守卫
                                       console.log('路由变化了', to, from)
                                         
                                         })

              没有next()函数  应用于记录访问次数

守卫执行的顺序