就比如当在当点击news和message时,需要学校为对应名字才能显示内容,否则就不行

 

所以我们可以在路由规则里面写入判断是否为对应信息,校验正确则进行显示

这时候路由配置要这样写

 加入一个router.beforeEach 表示在初始化时候被调用和每次路由切换之前别调用

 

 

 然后这里面有三个参数 一个为to 一个为from 一个为next

也就说to和from是把你要跳转到哪里,从哪边跳转过来都拿到

 

 

 而现在相当于路由守卫把你的路由都给拦住了,所以我们要使用第三个参数项nest进行路由的放行

实现了所以路由的放行

 

 但是如果像这样写,相当于把所有路由都加上了权限放行

 多写一个判断就行

 用name也是可以的

而这边会发现这边的判断一旦要进行权限的路由一多就会非常麻烦

所以我们在路由规则里配置一个meta配置项写点程序员要存放的东西

在里面存入一个key为false表示不需要权限限制,或者可以直接不配置,此时前置守卫那读到的就是undefined也就是false

 

 然后哪些路由的跳转需要权限的限制就加上meta:{isAyth:true}

 

 

 对比一下,使用了meta之后就会好很多

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue