Vue中的路由配置项meta(及权限登录不同的导航)

本文介绍了Vue.js中如何利用meta字段实现面包屑导航、路由守卫以及用户权限控制。通过设置不同路由的meta信息,可以实现在导航时动态展示内容,以及根据用户权限分配不同页面。在登录时,根据返回的状态码或token来决定用户进入的页面,从而实现普通用户和管理员的差异化体验。注意路由出口的位置、属性绑定以及首次加载时的重定向策略,动态添加路由也是关键操作之一。

meta?

meta简单来说就是路由元信息 也就是每个路由身上携带的信息。

  • 列举几个例子:

①.面包屑效果
在这里插入图片描述
路由信息:
在这里插入图片描述
页面:

在这里插入图片描述

②.可以在路由导航守卫跳转的时候判断有没有这个信息,如果有让跳转

如: 设置meta属性
在这里插入图片描述
设置路由守卫
在这里插入图片描述
③.根据不同的用户权限分配不同的路由导航

当我登录是,通过判断是管理员还是普通用户,引导他们进入不同的内容的index.vue组件页面。没错,只用一个页面,实现两种权限。

在这里插入图片描述 在这里插入图片描述

  • 有多种方式 先来看下第①种:

可以提前创建几套路由规则 然后在需要切换的页面中进行引用

在这里插入图片描述
②.切换整套路由

  • 首先要另外新创建一套路由,将所有的路由规则拷贝过去,只在这个一级路由的子路由那进行内容更改。

在这里插入图片描述
另一套路由:
在这里插入图片描述

  • 然后在登录页面里面 通过判断后台返回的登录状态码(或根据导航守卫是否携带token) 分配不同的权限。

在这里插入图片描述
这样就能实现普通用户进入普通页面,超管进入超管页面了

总结了几个需要注意的事项:

①. 路由出口 <router-view></router-view> 放在哪,下级路由里的内容就显示在什么地方
在这里插入图片描述
②. 给属性绑定值时,一定记得加上"v-bind"或者" : "

在这里插入图片描述
③. 首次打开哪个二级路由,如果这个一级路由没有路由展示入口,可以直接在路由跳转时直接重定向到某个二级路由

在这里插入图片描述
使用:
在这里插入图片描述
④. addRouter可以动态改变路由

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值