• Vue-router 路由守卫


    Vue-router 路由守卫

    const router = new VueRouter({ ... })

    前置路由守卫

    router.beforeEach((to,from,next) => {

        // to 下一跳路由路径地址

        // from 上次路由地址对象

        // next 回调钩子函数,next会解析出当前路径是否合法,是否需要路径判断重定向报错等 可以给next传参

        //  执行的效果依赖传递的next 参数,如果全部钩子执行完毕,路由状态转为confirmed

        //  next 可接受参数形式:false 终端路由跳转,'/'(新的路径),{ path: '/',replace: true, to: '', name: ''}

        //  router.push 中的选项,或者传递报错Error,在router.onError 回调中捕获错误信息 

        //  确保调用 next 方法,保证 路由路径跳转 resolve 

        // 

      1. fullPath: "/im-manage"
      2. hash: ""
      3. matched: [{…}]
      4. meta: {}
      5. name: "im-manage"
      6. params: {}
      7. path: "/im-manage"
      8. query: {}

        //   to   from  对象的全部属性,两者一致! 可以以此参数的值判断 next 传参从而改变路由展示的状态

    })

    全局路由守卫

    router.beforeResolve   同时在所有组件内守卫  ,  异步路由组件被解析之后    beforeResolve 被调用

     

    全局后置钩子

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

      // to 下一跳路由路径

      // from 上一跳地址, 不提供 next也不需要next了,路由导航已经结束

    })

    路由独享守卫

    const router = new VueRouter({

        routes: [

           {

              path: '/foo',

              component: Foo,

               beforeEnter: (to, from, next) => {

                //  此处可以限制路由跳转来自哪里,是否是被允许的跳转等

                // ...路由路径配置内定义路由地址独享的路由守卫,对单个地址配置路由判断 beforeEnter

               }

           }

        ]//  路由数组

    })

    组件内路由守卫

    beforeRouteEnter

    beforeRouteUpdate

    beforeRouteLeave   

    //  组件模板

    const Foo = {

     template: `...`,

     beforeRouteEnter (to, from, next) {

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

       // 不!能!获取组件实例 `this`

       // 因为当守卫执行前,组件实例还没被创建

       // 

      1. fullPath: "/im-manage"
      2. hash: ""
      3. matched: [{…}]
      4. meta: {}
      5. name: "im-manage"
      6. params: {}
      7. path: "/im-manage"
      8. query: {}

       //   to   from  对象的全部属性,两者一致!  

     },

     beforeRouteUpdate (to, from, next) {

       // 在当前路由改变,组件复用的路由路径

       // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

       // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

       // 可以访问组件实例 `this`

     },

     beforeRouteLeave (to, from, next) {

       // 导航离开该组件的对应路由时调用

       // 可以访问组件实例 `this`

     }

    }

    路由的完整一般解析路程是 酱紫的:

    1. 导航被触发。
    2. 在失活的组件里调用离开守卫。
    3. 调用全局的 beforeEach 守卫。
    4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
    5. 在路由配置里调用 beforeEnter
    6. 解析异步路由组件。
    7. 在被激活的组件里调用 beforeRouteEnter
    8. 调用全局的 beforeResolve 守卫 (2.5+)。
    9. 导航被确认。
    10. 调用全局的 afterEach 钩子。
    11. 触发 DOM 更新。
    12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
  • 相关阅读:
    解决mysqldump: Got error: 1044: Access denied for user
    Ubuntu技巧之 is not in the sudoers file解决方法
    mysql日志详细解析
    linux利用grep查看打印匹配的下几行或前后几行的命令
    Linux无法使用userdel删除用户和组的解决办法
    ubuntu快速清理磁盘垃圾
    smarty中math函数的用法
    metinfo首页内容简介
    linux命令别名的使用
    mysql 导出表结构和表数据 mysqldump用法
  • 原文地址:https://www.cnblogs.com/the-last/p/11391783.html
Copyright © 2020-2023  润新知