导航”表示路由正在发生改变。

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

全局守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

const arr = ["my"]

router.beforeEach((to, from, next) => {
  if (arr.includes(to.name)) {
    let userId = localStorage.getItem("userId")
    if (userId) {
      next()
    } else {
      next("/my")
    }
  } else {
    next()
  }
})

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
  // ...
})

独享守卫

与全局前置守卫的方法参数是一样的

const router = new VueRouter({

  routes: [

    {
      path: '/shop/:id',
      component: 'shop',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内守卫

const Foo = {

  template: `...`,

  beforeRouteEnter (to, from, next) {

      if(to.params.id < 10){
          next()
      }eslse{
          next('/login')
      }

    1。在渲染该组件的对应路由被confirm前调用
    2。不！能！获取组件实例 `this`
    3。因为当守卫执行前，组件实例还没被创建
  },

  beforeRouteUpdate (to, from, next) {

    1. 在当前路由改变，但是该组件被复用时调用
    2 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    3 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    4 可以访问组件实例 `this`
  },

  beforeRouteLeave (to, from, next) {

   1 导航离开该组件的对应路由时调用
   2 可以访问组件实例 `this`

  }
}

路由元信息

定义路由的时候可以配置 meta 字段

    meta: { requires: true }

    routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

    导航守卫中的路由对象 的 $route.matched 数组

    全局导航守卫中检查元字段

    router.beforeEach((to,from,next)=>{
      if(to.matched.some(record=>record.meta.requires)){
        if(!localStorage.getItem("token")){
          next({
            name:'login'
          })
        } else {
          next()
        }
      } else{
        next()
      }
    })