【Vue】VueRouter路由导航卫士

【Vue】VueRouter路由导航卫士

---

路由导航卫士是vue路由跳转中的钩子函数，通过对钩子函数的编写，达到编写的对路由的控制

1. 全局前置守卫

---

全局前置守卫是路由中经常用到的守卫，一般情况下我们可以使用该钩子函数判断用户信息，如果用户没有登录的token时，可以帮助用户跳转到登录页面进行登录

to:表示路由需要去的路径

from:表示路由从哪个路径来

next()：放行函数，如果next(),则正常跳转到to,如next(‘/login’)则表示跳转到其他路由

const router = new VueRouter({...})
router.beforeEach(to,from,next){
  // 判断用户信息逻辑代码。。。
  next();//注意，一定要有next放行
}

2. 全局解析守卫

---

和全局前置守卫一样，该守卫也是在全局路由拦截，该守卫一般情况用不到，后续有了心得再更新

const router = new VueRouter({
  。。。
})
router.beforeResorve(to,from,next){...}

3. 全局后置钩子

---

全局后置钩子也是路由跳转是的一种函数，但没有next参数

const router = new VueRouter({
  。。。
})
router.afterEach(to,from){...}

4. 路由独享守卫

---

你可以在路由配置中直接配置路由守卫

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

5. 组件内的守卫

---

• beforeRouteEnter前置守卫
• beforeRouteUpdate:路由更新守卫
• beforeRouteLeave

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