面试中的vue-router 鉴权 守卫

vue-router 鉴权 守卫

路由守卫分为三种,分别是

1.全局路由守卫
2.组件内部守卫
3.路由独享守卫

全局路由守卫

所有模板都可以守卫到
to是去那个页面
from是从那个页面来
next是否进入这个页面/下一步


router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  console.log(next());
  next()
})

//全局鉴权

router.beforeEach((to, from, next) => {
   if(to.path=="/wdd"){  //进入wdd页面的时候
     if(store.state.username==""){  //如果username 没有的话就 让他返回登录页面
        router.push("dl")
    }
   }
   if(to.path=="/dl"){      // 点击进入 登录页面的时候 
     if(store.state.username){ //有数据的时候让返回上一页
       router.go(-1) 
    }
   }
   next() //全局通过
 })

组件内部守卫

  beforeRouteEnter (to, from, next) {
  注意进入路由之前,组件渲染实例还没完成,还不可以使用this访问组件 ,
  可以使用vm
    console.log(to);
    console.log(from);
    console.log(next);
    console.log(next(vm));
    console.log(this);//undefind
    next(vm => {})
  }


  beforeRouteUpdate (to, from, next) {

   // 同一页面,刷新不同数据时调用,

    }

  beforeRouteLeave (to, from, next) {

    // 离开当前路由页面时调用

    }

路由独享守卫
一样的,
to是去哪里,from是从哪里来,next是是否进入,或者是进入下一步

   {
      path: '/xqq/:id',
      name: 'xqq',
      component: () => import('./views/lo/xqq.vue'),
      beforeEnter(to,from,next){next()}
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值