路由与菜单
# 路由与菜单
路由与菜单的管理,是前端项目中非常重要的一部分。
为了减少开发配置和理解成本,在 TDesign Starter 项目中,管理菜单路由都规范在src/router 这个目录下进行配置。
配置内容是一个对应菜单层级的可嵌套的数组,如
[
{
path: '/list',
name: 'list',
component: Layout,
redirect: '/list/base',
meta: {
title: '列表页',
icon: ListIcon
},
children: [
{
path: 'base',
name: 'ListBase',
component: () => import('@/pages/list/base/index.vue'),
meta: {
title: '列表(基础)',
// 用来修改当出现子菜单在active状态不会激活父元素的active状态
singles: true
}
},
{
path: 'upBase',
name: 'ListBase1',
component: () => import('@/pages/list/upBase/index.vue'),
meta: {
title: '列表(带图)'
}
}
]
},
]
# 配置字段都有具体的作用:
path 是当前路由的路径,会与配置中的父级节点的 path 组成该页面路由的最终路径;如果需要跳转外部链接,可以将path设置为 http 协议开头的路径。
name 影响多标签 Tab 页的 keep-alive 的能力,如果要确保页面有keep-alive的能力,请保证该路由的name与对应页面(SFC)的name保持一致。
component 渲染该路由时使用的页面组件
redirect 重定向的路径
meta 主要用途是路由在菜单上展示的效果的配置
meta.title 该路由在菜单上展示的标题
meta.icon 该路由在菜单上展示的图标
meta.hidden 决定该路由是否在菜单上进行展示
meta.single 如果是多级菜单且只存在一个节点,想在菜单上只展示一级节点,可以使用该配置。请注意该配置需配置在父节点
children 子菜单的配置
# 配置字段实例:
{
path: '/list', // 主路由
name: 'list', // 页面名称 英文
component: Layout, // 页面架构
redirect: '/list/upBase', // 重定向 及打开 http://xxx/#/list 时会跳转到 http://xxx/#/list/base
meta: { // 页面消息
title: '列表页', // 页面标题 页面中会使用
icon: ListIcon // icon 导航中使用
},
children: [ // 子路由的 内容
{
path: 'upBase', // 子路由
name: 'upBase', // 子路由名
component: () => import('@/pages/list/baseUp/index.vue'), // 路由所对应的页面
meta: {
title: '列表'
}
}
]
}
# 三级路由
由于我们的菜单的限制,最多只允许配置到三级菜单。如果菜单层级超过三级,我们建议梳理业务场景,判断层级是否合理。 如需要使用三级菜单 请使用模板四作为基础模板 或者产考其配置项
{
path: 'thirdRoutesB',
name: 'thirdRoutesB',
parent: 'noData', // parent的值最后会添加到对应菜单下的子菜单
component: () =>
import('@/pages/list/noData/components/thirdRoutesB.vue'),
meta: {
title: '三级路由页面B'
}
},