vue-router导航守卫全解析

导航守卫

vue-router实例方法提供了守卫导航的方法，可以将我们的代码逻辑植入到路由导航过程中。主要分为全局、单个路由共享、组件级

全局

router.beforeEach()

• 作用：导航前置守卫 在路由跳转之前进行判断和拦截，一般用来做一些进入页面的限制，比如未登录不能进入某些页面
• 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
• 参数
  • to:Route对象，即将要进入的目标
  • from:Route，当前要离开的路由
  • next:function，一定要调用该方法来resolve这个钩子。
    • 如果调用next()调用管道中的下一个钩子，如果全部钩子执行完毕，则导航的状态是comfirmed
    • next(false),中断当前的导航，如果浏览器的url改变了比如用户手动或者是浏览器后端按钮，则url会重置到from路由对应的地址
    • next(’/’)或者next({path:’/’})跳转到指定的/地址，就是不去to的地址，跳到新地址。
    • next(error)

router.beforeEach((to, from,next) => {
    if(to.path!='/login'){
        next('/')
    }else{
        next()
    }
})

router.beforeResolve()

• 作用：注册全局解析守卫，在2.5.0+可以使用，它和 router.beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
• 参数
  • to，即将要进入的目标
  • from，当前要离开的路由
  • next，一定要调用该方法来resolve这个钩子。

router.be