首页 > 其他分享 >组件内路由守卫

组件内路由守卫

时间:2023-02-27 11:01:16浏览次数:44  
标签:next 守卫 跳转 组件 权限 beforeRouteLeave 路由

简介:

作用:给组件设置权限

beforeRouteEnter(to,from,next){

  通过路由规则,进入该组件时被调用

},

beforeRouteLeave(to,from,next){

  通过路由规则,离开该组件时被调用

},

操作:

主页面的Home组件:

<template>
  <div class="home">
    <h1>我是Home</h1>
  </div>
</template>

<script>
    
export default {
  name: "home",
  mounted() { },
      // 通过路由规则,进入该组件时被调用
    beforeRouteEnter(to, from, next) {
          if (to.meta.isAuth){
              // 如果本地存储的Nuber值为yang就跳转,反之弹出权限不够弹出权限不够
              if (localStorage.getItem('Nuber') === 'yang') {
                  next()
              } else{
                  alert('权限不够')
              }
          } else{
              next()
          }
      },
    // 通过路由规则,离开该组件时被调用 控制路由离开
    beforeRouteLeave(to,from,next){
        next()
    },

};
</script>

 

 如果不给 beforeRouteLeave 设置next() 那么路由就不会进行跳转 ;可以进行判断不填写什么不让跳转路由

 beforeRouteLeave(to,from,next){
       
    },

 

标签:next,守卫,跳转,组件,权限,beforeRouteLeave,路由
From: https://www.cnblogs.com/0722tian/p/17158887.html

相关文章

  • 调用兄弟组件的方法
    调用兄弟组件的方法使用场景:在第一个子组件中点击列表的信息时,第二个子组件执行查询接口。使用方法:在第一个子组件执行点击事件时,通过子传父方法传第二个子组件需要的值......
  • RIP 路由汇总实验
     RIP路由汇总实验​​​​r1:f0/0:192.168.1.1loopback1:172.16.1.1loopback2:172.16.2.1r2:f0/0:192.168.1.2f0/1:192.168.2.1r3:f0/0:192.168.3.1f0/1:192.168......
  • 静态路由默认路由的配置
    静态路由实验负载均衡的一点是个人理解,有不正确之处欢迎批评指正。             R1配置:s0/0/0口:193.1.1.9/30(本地)  next-hop193.1.1.10/30 point-to-......
  • vue3 + vite4 + vue-router4动态路由存在的问题
    使用vite4、vue3、vue-router4搭建动态路由的时候遇到的问题及解决方法解决!!我使用的是登录接口返回菜单,使用pinia存储菜单数据,使用pinia-plugin-persist加js-cookie进行......
  • 独享路由守卫 beforeEnter
    介绍: beforeEnter独享路由守卫单独给某个路由进行校验操作:{name:'xiaoxi',path:'aboutone',com......
  • 全局后置__路由守卫
    简介:在初始化后被调用,跳转路由之后被调用实现效果:跳转到哪个路由哪个路由页的tilte改变文本  实例:importVuefrom"vue";importRouterfrom"vue-router";im......
  • Spring Boot 实现日志链路追踪,无需引入组件,让日志定位更方便!
    来源:blog.csdn.net/qq_35387940/article/details/125062368前言从文章标题就知道,这篇文章是介绍些什么。这是我一位朋友的问题反馈:好像是的,确实这种现象是普遍存在的......
  • 自定义组件
                                                         ......
  • 申报发布项目单点登录调试时候,前端请求前缀带了sbgl,没有重写sbgl,然后后端数据库的路由
       1.从数据库修改表数据,redis不会更新这个数据,所以得重启redis才能看到最新效果,但是你从前端界面修改路由的话,那就不用立马重启redis,因为一般自己设计的框架都会自......
  • Go组件库总结之无等待锁
    本篇文章我们用Go封装一个无等待锁库。文章参考自:https://github.com/brewlin/net-protocol1.锁的封装typeMutexstruct{vint32chchanstruct{}}2.锁......