前言
闲人经历了很多后台管理系统的搭建,发现传统的前端路由导航数据结构不能达到现有的技术发展水平,进行了一段时间思考后设计了现有的结构,以供大家参考。
一、传统结构?
export default [
{
"name": "登陆、错误、找回密码",
"path": "/login、/error、/password",
"component": "/Login、/Error、/Password"
"meta": {
"title": "登陆、错误、找回密码"
},
"redirect": null
},
{
"name": "业务路由",
"path": "/business",
"component": "Layout", //表示带有导航栏的布局视图
"meta": {
"MenuRoot": true, //表示导航菜单从此处开始构建
},
"redirect": "firstChild", //将会重定向到第一个子菜单
"children":[
{
"name": "用户管理",
"path": "account", // /business/account
"component": "/views/Account-RouterView",
/*
此页面组件带了一个RouterView组件
用来显示嵌套路由的内容
*/
"meta": {
"hidden": false,
/*
`hidden:false`表示该菜单显示在导航Menu中。
如果子元素全部`hidden: true`时,点击前往该路由地址;
否则,则点击后只会打开SubMenu子菜单。
*/
"title": "用户管理"
},
"redirect": false,
"children":[
{
"name": "新增、编辑",
"path": "detail", // /business/account/detail
"component": "/views/Account/Detail",
"meta": {
"hidden": true,
/*
此菜单无法设定为false
因为会造成上级菜单无法路由跳转
*/
"title": "新增、编辑"
},
"redirect": false
}
]
}
]
}
];
优点
数据定义简单,只需要定义一份树状结构的数据即可。
缺点
Menu菜单的结构,受限于RouterView页面的嵌套结构影响。
同一个大菜单下,如果存在多级RouterView嵌套,则菜单只能设定为某一个级别的页面,极大限制了业务的需求。
二、新的结构
export const routes = [
{
"name": "登陆、错误、找回密码",
"path": "/_login、/_error、/_password",// 系统路径限制为下横线开头
"component": "/Login、/Error、/Password"
"meta": {
"title": "登陆、错误、找回密码"
},
"redirect": null
},
{
"name": "业务路由",
"path": "/business", //业务路由禁止使用下横线开头
"component": "Layout", //表示带有导航栏的布局视图
"redirect": "firstChild",
"children":[
{
"name": "用户管理",
"path": "account", // /business/account
"component": "/views/Account-RouterView",
"children": [
{
"name": "新增、编辑",
"path": "detail", // /business/account/detail
"component": "/views/Account/Detail",
"redirect": false
}
]
"redirect": false
}
]
}
];
export const menus = [
{
"name": "用户相关" ,
"children":[
{
"name": "用户管理",
"url": "/business/account"
},
{
"name": "快速新增用户",
"url": "/business/account/detail"
}
]
}
]
优点
更加灵活,结构对象各司其职,路由只负责页面嵌套,菜单只负责路由跳转。
缺点
定义更加复杂,关联关系需要专门定义。
总结
闲人目前已经使用了第二种定义方式,在我看来,第一种只适用于新人、懒人。
以上内容纯属虚构,如有雷同纯属抄袭【此处应有盖章】