美文网首页
vue-router导航守卫(生命周期)

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

作者: 苹果咏 | 来源:发表于2020-03-30 11:19 被阅读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

相关文章

  • vue导航守卫

    导航守卫:vue-router主要提供跳转或取消的方式守卫导航, 导航守卫分为全局前置守卫、全局解析守卫、全局后置...

  • vue-router进阶

    导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航(路由发生改变才会守卫)。参数 ...

  • 导航守卫以及keep-alive

    一 什么是导航守卫? vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.vue-router提...

  • 导航守卫

    vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航 全局守卫 全局前置守卫 当一个导航触发时...

  • vue-router导航守卫&&滚动&&路由懒加载

    导航守卫 正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫,有多种机会植入路由导航过程...

  • web前端面试题@九(vue导航守卫)

    什么是导航守卫? 正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入...

  • vue-router进阶

    导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。参数或查询的改变并不会触发进入...

  • vue导航守卫

    “导航”表示路由正在发生改变。 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航...

  • beforeRouteEnter钩子处理页面刷新问题

    vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, ...

  • Vue - 路由守卫(路由的生命周期)

    路由守卫是什么? 官方解释:“导航”表示路由正在发生改变。正如其名,vue-router提供的导航守卫主要用来通过...

网友评论

      本文标题:vue-router导航守卫(生命周期)

      本文链接:https://www.haomeiwen.com/subject/ivoyuhtx.html