美文网首页
路由守卫

路由守卫

作者: 练习时长2年半的个人练习生 | 来源:发表于2020-07-10 15:31 被阅读0次

    路由守卫分为三种

    • 全局守卫:
    router.beforeEach((to, from, next) => {
      console.log('全局路由')   
      next()
    })
    
    • 路由独享守卫
      卸载route里
      beforeEnter(to, from, next) {
            if (to.meta.auth) {
              console.log('这个页面需要鉴权')
              next()
            }
          }
    
    • 组件内守卫:
      写在组件配置对象里
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不!能!获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    

    相关文章

      网友评论

          本文标题:路由守卫

          本文链接:https://www.haomeiwen.com/subject/fgdmcktx.html