路由/菜单说明
====
格式和说明
----
```ecmascript 6
const routerObject = {
redirect: noredirect,
name: 'router-name',
hidden: true,
meta: {
title: 'title',
icon: 'a-icon',
target: '_blank|_self|_top|_parent',
keepAlive: true,
hiddenHeaderContent: true,
}
}
```
`{ Route }` 对象
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ----------------------------------------- | ------- | ------ |
| hidden | 控制路由是否显示在 sidebar | boolean | false |
| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - |
| name | 路由名称, 必须设置,且不能重名 | string | - |
| meta | 路由元信息(路由附带扩展信息) | object | {} |
| hideChildrenInMenu | 强制菜单显示为Item而不是SubItem(配合 meta.hidden) | boolean | - |
`{ Meta }` 路由元信息对象
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | ------------------------------------------------------------ | ------- | ------ |
| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
| icon | 路由在 menu 上显示的图标 | [string,svg] | - |
| keepAlive | 缓存该路由 | boolean | false |
| target | 菜单链接跳转目标(参考 html a 标记) | string | - |
| hidden | 配合`hideChildrenInMenu`使用,用于隐藏菜单时,提供递归到父菜单显示 选中菜单项_(可参考 个人页 配置方式)_ | boolean | false |
| hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/PageHeader/PageHeader.vue#L6) 组件中的页面带的 面包屑和页面标题栏 | boolean | false |
| permission | 与项目提供的权限拦截匹配的权限,如果不匹配,则会被禁止访问该路由页面 | array | [] |
> 路由自定义 `Icon` 请引入自定义 `svg` Icon 文件,然后传递给路由的 `meta.icon` 参数即可
路由构建例子方案1
路由例子
----
```ecmascript 6
const asyncRouterMap = [
{
path: '/',
name: 'index',
component: BasicLayout,
meta: { title: '首页' },
redirect: '/dashboard/analysis',
children: [
{
path: '/dashboard',
component: RouteView,
name: 'dashboard',
redirect: '/dashboard/workplace',
meta: {title: '仪表盘', icon: 'dashboard', permission: ['dashboard']},
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: {title: '分析页', permission: ['dashboard']}
},
{
path: '/dashboard/monitor',
name: 'Monitor',
hidden: true,
component: () => import('@/views/dashboard/Monitor'),
meta: {title: '监控页', permission: ['dashboard']}
},
{
path: '/dashboard/workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: {title: '工作台', permission: ['dashboard']}
}
]
},
// result
{
path: '/result',
name: 'result',
component: PageLayout,
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
children: [
{
path: '/result/success',
name: 'ResultSuccess',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
// 该页面隐藏面包屑和页面标题栏
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
},
{
path: '/result/fail',
name: 'ResultFail',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
// 该页面隐藏面包屑和页面标题栏
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
}
]
},
...
]
},
]
```
> 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
> 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内
> 3. 子路由的父级路由必须有 `router-view` 才能让子路由渲染出来,请仔细查阅 vue-router 文档
> 4. `permission` 可以进行自定义修改,只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)
附权限路由结构:
![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
第二种前端路由由后端动态生成的设计,可以前往官网文档 https://pro.loacg.com/docs/authority-management 参考
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
蚂蚁设计专业Vue模板 根据改造后的开箱即用的后台管理系统模板,优化了很多内容,更轻量,更简洁,可以在此模板上快速,便捷地去建造自己的后台项目。预览:| 优化:项目结构和文件夹命名,项目结构更加合理 优化:只保留基础的实例路由和页面,删除了其他页面 优化:顶部multiTab的样式,可跟随header固定 优化: 升级为最新的2.x 优化:打包配置,可根据不同打包环境输出不同目录 优化:multiTab快捷呼出交菜单可选范围覆盖到整个选项卡 优化:切换路由的效果,并提供了两个切换效果 补充:配置打包分析和快速lint-ifx命令 新增:变量可用的less变量 新增:权限控制是否开启的配置 补充
资源推荐
资源详情
资源评论
收起资源包目录
vue-antdesign-admin-template:Ant Design Pro Vue模板 (126个子文件)
.browserslistrc 34B
.env.development 315B
.editorconfig 658B
.eslintignore 124B
.gitignore 236B
index.html 2KB
other.js 31KB
user.js 13KB
manage.js 6KB
menu.js 4KB
generator-routers.js 4KB
menu.render.js 4KB
permission.js 4KB
icons.js 4KB
vue.config.js 3KB
plugin.config.js 3KB
app.js 3KB
article.js 3KB
user.js 3KB
auth.js 2KB
router.config.js 2KB
mixin.js 2KB
util.js 2KB
request.js 2KB
dynamicLoadScript.js 2KB
components_use.js 2KB
permission.js 2KB
set_store_width_config.js 1KB
action.js 1KB
multi-tab.js 1KB
user.js 1KB
manage.js 1KB
settingConfig.js 1010B
util.js 1008B
util.js 946B
layout.js 935B
themeColor.js 877B
index.js 830B
main.js 827B
index.js 802B
mutation-types.js 800B
index.js 755B
device.js 748B
example.js 719B
permission.js 702B
lazy_use.js 622B
axios.js 596B
plugins.js 574B
index.js 562B
filter.js 560B
getters.js 543B
domUtil.js 539B
type.js 532B
babel.config.js 502B
toolbar.js 491B
.prettierrc.js 386B
index.js 363B
icons.js 344B
index.js 295B
.eslintrc.js 288B
index.js 270B
index.js 205B
link.js 187B
table.js 181B
index.js 77B
index.js 73B
index.js 70B
index.js 70B
index.js 64B
index.js 64B
postcss.config.js 61B
index.js 59B
index.js 48B
events.js 47B
package.json 2KB
jsconfig.json 182B
index.jsx 2KB
global.less 9KB
nprogress.less 1KB
utils.less 1KB
index.less 916B
transition.less 518B
index.less 206B
LICENSE 1KB
yarn.lock 392KB
README.md 5KB
README.md 2KB
index.md 862B
logo.png 20KB
favicon.png 20KB
.env.production_env 392B
background.svg 9KB
logo.svg 5KB
bx-analyse.svg 2KB
.env.test_env 392B
SettingDrawer.vue 11KB
Login.vue 9KB
index.vue 7KB
MultiTab.vue 5KB
PageLayout.vue 4KB
共 126 条
- 1
- 2
资源评论
- 来自潘大大2022-01-10我去,你这个居然评分。我还是vip版本
- qq_151728892021-08-16用户下载后在一定时间内未进行评价,系统默认好评。
荒腔走兽
- 粉丝: 23
- 资源: 4663
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功