vue路由守卫

一、全局路由守卫

全局前置守卫

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数
}

next()：回调函数参数配置
next(false)：中断当前的导航。
如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项
一般在使用addRouters的时候为防止动态添加的路由还没有完全加载上去就被访问导致白屏的问题时，可以通过设置replace: true来避免
想要动态添加路由的话应该是这样

router.beforeEach((to, from, next) => {
 const token = sessionStorage.getItem('access_token')
 // 存在 token 说明已经登录
 if (token) {
   // 登录过就不能访问登录界面，需要中断这一次路由守卫，执行下一次路由守卫，并且下一次守卫的to是主页'
   if (to.path === '/login') {
     next({ path: '/' })
   }
   // 保存在store中路由不为空则放行 (如果执行了刷新操作，则 store 里的路由为空，此时需要重新添加路由)
   if (store.getters.getRoutes.length || to.name != null) {
     //放行
     next()
   } else {
     // 将路由添加到 store 中，用来标记已添加动态路由
     store.commit('ADD_ROUTER', '需要添加的路由')
     router.addRoutes('需要添加的路由')
     // 如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
     next({ ...to, replace: true })
   }
 } else {
   // 未登录时，注意 ：在这里也许你的项目不只有 logon 不需要登录 ，register 等其他不需要登录的页面也需要处理
   if (to.path !== '/logon') {
     next({ path: '/logon' })
   } else {
     next()
   }
 }

全局后置守卫

router.afterEach（to，from） = {}

二、组件路由守卫

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

三、独享路由守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

    next()//直接进to 所指路由
    next(false) //中断当前路由
    next('route') //跳转指定路由
    next('error') //跳转错误路由