vue中的路由守卫语法

路由守卫的三个参数

//to:目标路由，要去的路由地址

//from:导航来的路由地址

//next:下一步

全局守卫

分别是全局前置守卫和全局后置守卫

全局前置守卫

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

        next()

})

全局后置守卫

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

   next()

}) 

路由独享首位

 {  //在路由规则中使用
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from，next) => {
      next()
    },
  },

 组件内部守卫

beforeRouteEnter //组件被访问之前

beforeRouteUpdate  //对应组件路由改变时

beforeRouteLeave  //离开组件时

beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },

beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },