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)

路由元信息

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

在这里插入图片描述
此处就需要写很长的代码 为了简化我们采用路由元信息
在这里插入图片描述
给每个需要守卫的路由配置下只需要加上面框出来的代码即可
然后 在路由守卫里 只需要这样写即可。如下图
在这里插入图片描述

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

也可以这样写:(vue3.0+ts)
在这里插入图片描述

后置守卫

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

Logo

前往低代码交流专区

更多推荐