有别于传统的路由导航数据设计

前言

闲人经历了很多后台管理系统的搭建，发现传统的前端路由导航数据结构不能达到现有的技术发展水平，进行了一段时间思考后设计了现有的结构，以供大家参考。

一、传统结构？

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"
			}
		]
	}
]

优点

更加灵活，结构对象各司其职，路由只负责页面嵌套，菜单只负责路由跳转。

缺点

定义更加复杂，关联关系需要专门定义。

总结

闲人目前已经使用了第二种定义方式，在我看来，第一种只适用于新人、懒人。
以上内容纯属虚构，如有雷同纯属抄袭【此处应有盖章】