vue中的路由守卫

全局守卫

to: 目标路由
from: 当前路由
next() 跳转一定要调用
next(false);//不让走
next(true);//继续前行
next(’/login’)//走哪
next({path:’/login’,params:{},query:{}})//带点货

1、在登录界面，登录成功时将username存储在localStorage里面

//前置
router.beforeEach((to,from,next)=>{
//如果要去My或者index页面
  if(to.path=='/My' || to.path=='/index' ){
  //判断l如果ocalStorage里面是否有Username
    if(localStorage.getItem("username")){
   //有用户信息让它继续走
      next(true);
    }else{
      //否则让它跳转到登录界面，跳转到登录界面时，需要把to.path传入，方便在登录成功时跳转到对应界面上
      next({"path":"/Login",query:{"topath":to.path}})
    }
  }else{
  //否则去其他界面时 让它继续走
    next(true);
  }
})

在登录界面登录成功时需要加如下代码, 即登录成功后从守得那个页面在登录成功后就自动跳到那个页面去

this.$router.push(this.$router.params.topath)

路由元信息

一般情况下，我们需要守卫的页面比较多时,或者以后要增加守卫时，就不用修改逻辑，

在这里插入图片描述
此处就需要写很长的代码为了简化我们采用路由元信息

给每个需要守卫的路由配置下只需要加上面框出来的代码即可
然后在路由守卫里只需要这样写即可。如下图

这样就可以啦是不是就方便很多呢！

后置守卫

router.afterEach((to,from)=>{
  //全局后置守卫业务
})

路由独享守卫

// src/router/index.js
{
  path: '/user',
  component: User,
  beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 
    console.log('路由独享守卫');
    if(Math.random()<.5){
      next()
    }else{
      next('/login')
    }
  }
 }

注意：独享，没有后置

组件内部守卫

//组件内部钩子
beforeRouteEnter (to, from, next) {//前置
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {//后置
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

注意：

路由独享守卫，守的是path

组件内部守卫，守的是component

vue中的路由守卫

vue中的路由守卫

猜你喜欢