vue-router的导航守卫使用最新讲解

router.beforeEach(function (to, from, next) {
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有token
    const token = localStorage.getItem('token')
    if (token) { // token值存在
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next() // 访问的不是后台主页，直接放行
  }
})

// 全局前置守卫：初始化时、每次路由切换前执行
router.beforeEach((to, from, next) => {
  console.log('beforeEach', to, from)
  if (to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
    if (localStorage.getItem('token') === 'key') { // 权限控制的具体规则
      next() // 放行
    } else {
      alert('暂无权限查看')
    }
  } else {
    next() // 放行
  }
})

// 全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to, from) => {
  console.log('afterEach', to, from)
  if (to.meta.title) {
    document.title = to.meta.title // 修改网页的title
  } else {
    document.title = 'process'
  }
})

beforeEnter (to, from, next) {
  console.log('beforeEach', to, from)
  if (to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
    if (localStorage.getItem('admin') === 'admin123') { // 权限控制的具体规则
      next() // 放行
    } else {
      alert('暂无权限查看')
    }
  } else {
    next() // 放行
  }
}

// 通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) { },
// 通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) { }