vue-router导航守卫(生命周期)

2020-03-30  本文已影响0人  苹果咏

全局前置守卫
router.beforeEach,主要是判断有没有权限访问该路由

router.beforeEach((to, from, next) => {
  var logged_in = false
  if(!logged_in && to.path == '/user'){
    alert('你没登录')
    next('/')
  }
  else
    next() 
})

或者/user下面所有路径都不能访问

router.beforeEach((to, from, next) => {
  var logged_in = false
  if(!logged_in && to.matched.some(function(item){
    return item.path == '/user'
  })){
    alert('你没登录')
    next('/')
  } 
  else
    next() 
})

或者在路由里面加一个判断是否登录的属性

{
    path: '/user/:name',
    name: 'User',
    component: User,
    children: [
      {
        path: 'usermore',
        name: 'UserMore',
        component: UserMore
      }
    ],
    meta: {
      login_required: true   // 要不要判断是否登录
    }
  }
router.beforeEach((to, from, next) => {
  var logged_in = false
  if(!logged_in && to.matched.some(function(item){
    return item.meta.login_required
  })){
    alert('你没登录')
    next('/')
  }
  else
    next() 
})

其他导航守卫参考https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

上一篇 下一篇

猜你喜欢

热点阅读