vue全局前置路由守卫、全局后置路由守卫及独享路由守卫

全局前置路由守卫

在路由跳转之前，我们可以对路由进行权限限制，它会传递一个回调函数，里面有三个参数

    //  to: 目标路由
    //  from: 当前路由
    //  next() 跳转  

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

  if (to.meta.isAuth) {
    if (localStorage.getItem('name') == 'zz') {
      next()
    }
    else {
      alert('你没有权限')
    }
  }
  else {
    next()
  }
})

全局后置导航守卫

不会接受 next 函数也不会改变导航本身，可以更新页面title,懒加载结束等

router.afterEach((to, from) => {
  document.title = to.meta.title
})

路由独享守卫

指在单个路由配置的时候也可以设置的钩子函数，和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫

beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。

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