全局前置守卫

router.beforeEach

router.beforeEach((to, from, next) => {
    console.log('to ====>', to)
    console.log('from ====>', from)
    next()
})

参数	说明
to	即将进入的目标路由对象；
from	当前导航正要离开的路由对象；
next()	在任何给定的导航守卫中都被严格调用一次， next() 表示放行的意思，如果不放行那么路由跳转就会被卡住，无法进入到路由对应的组件页面。该函数可在导航守卫不同逻辑中调用多次；
next(false)	中断当前的导航，如果调用了next(false)并且传入的参数为false，URL地址栏改变了，那么URL地址会被重置到from路由对象中的地址；
next('/')或next({ path: '/' })	中断当前的导航，然后进行一个新的导航，跳转到指定的地址；

举例：

• 判断用户是否登录，没有登陆跳转到登录页让用户进行登录操作，用户有登录放行进入首页。

  router.beforeEach((to, from, next) => {
      // 假设这里表示用户有登录
      if (userStore.token) {
          // 放行
          next()
      } else {
          // 中断导航，跳转到from路由对象中的地址
          next(false)
      }
  })
  

全局后置守卫

全局后置守卫一般可以用来做loadingBar，关闭进度条动画操作。

后置守卫和前置守卫不同的是，后置守卫不接受next函数，也不会改变导航本身。

router.afterEach((to, from) => {
    console.log('to ====>', to)
    console.log('from ====>', from)
})