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

meta?

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

  • 列举几个例子:

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

在这里插入图片描述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 21
    点赞
  • 89
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!感谢您的提问。要在 Ant Design Vue 设置文,您需要按照以下步骤操作: 1. 在您的 Vue 安装 Ant Design Vue: ``` npm install ant-design-vue --save ``` 2. 在您的 Vue 目的 main.js 文件引入 Ant Design Vue: ``` import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd); ``` 3. 在您的组件使用 Ant Design Vue 组件,例如 Button、Input、Select 等等。这些组件的文本内容都默认是英文的,您可以通过在组件的属性设置相应的值来改变它们的文本内容。 例如,您可以在导航菜单组件使用 `locale` 属性来设置菜单的文本内容为文: ``` <template> <a-menu :default-selected-keys="['1']" :mode="'inline'" :theme="'dark'" :locale="{item: '菜单', subMenu: '子菜单', children: '子菜单'}"> <a-menu-item key="1"> <a-icon type="user" /> <span slot="title">用户管理</span> </a-menu-item> <a-sub-menu key="sub1"> <span slot="title"> <a-icon type="team" /> <span>团队管理</span> </span> <a-menu-item key="2">团队信息</a-menu-item> <a-menu-item key="3">团队成员</a-menu-item> </a-sub-menu> </a-menu> </template> ``` 4. 如果您使用了 Vue Router 进行路由管理,您可以在路由配置使用 `meta` 属性来设置路由的文本内容为文。例如: ``` const routes = [ { path: '/user', name: 'User', component: User, meta: { title: '用户管理' } }, { path: '/team', name: 'Team', component: Team, meta: { title: '团队管理' }, children: [ { path: 'info', name: 'TeamInfo', component: TeamInfo, meta: { title: '团队信息' } }, { path: 'members', name: 'TeamMembers', component: TeamMembers, meta: { title: '团队成员' } } ] } ]; ``` 然后在您的页面组件使用以下代码来设置页面的标题为文: ``` export default { name: 'User', metaInfo() { return { title: this.$route.meta.title }; } }; ``` 以上就是在 Ant Design Vue 设置文的方法,希望对您有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值