vue路由守卫以及用法

路由守卫分为三种

1.全局路由守卫

• beforeEach 路由进入之前

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

•  afterEach 路由进入之后

钩子不会接受next函数也不会改变导航本身。它不管你去哪里，也不会拦你 

当然你也可以使用to和from对象。 

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

2.独享守卫

beforeEnter：这个守卫是写在路由里面的，只有进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的

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

 

3.组件内守卫

 beforeRouteEnter：路由进去

 beforeRouteUpdate：路由更新

 beforeRouteLeave：路由离开