春风得意马蹄疾
一日看尽长安花

vue路由守卫总结

全局前置守卫

需要对全局进行拦截

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

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

路由独享的守卫

单一的路由进行拦截

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

组件内的守卫

单一的路由进行拦截

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

路由独享的守卫和组件内的守卫的差别:

1.组件内部守卫是需要加载了组件才执行的。路由独享守卫是路由触发后就会执行,在组件加载之前就会执行。

2.路由独享守卫没有办法获得组件内部的内容,但是组件内部守卫可以在所有组件被确认之后,在next回调函数中操作组件。

3.组件的路由不更新,更新参数,路由独享守卫不会执行,组件内部守卫还是会执行

路由全局前置守卫和路由全局的解析守卫差别:

路由全局前置守卫是在组件加载前执行,路由全局的解析守卫是在组件加载后执行

全局后置钩子

router.afterEach((to, from) => {
  // ...
})
Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » vue路由守卫总结
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x