Bootstrap

vue根据后端菜单数据生成动态路由

动态路由初体验,存在不足,欢迎点评指正~

前言:在之前的项目中,菜单是动态获取的,而路由是写死的,配置路由的时候只要保证路由的path与菜单的index(elementUI的el-menu组件)相同就可以实现路由跳转,只是菜单改了的话,路由也得相应修改,否则就会找不到页面。当时之所以没有研究动态路由是觉得跳转的页面是路由指定的,如果路由变成动态获取的话,前端的页面文件命名和目录结构都得根据后端的数据调整,也不是很灵活,但是…最近后端调整了数据,发现好多路由没有匹配到,都跳转到了一个重定向/redirect页面,所以最终还是决定动手研究动态路由

1.将router/index.js写死的路由注释掉(或者删除)

2. 新建asyncRouter.js用来根据菜单提取路由表,菜单结构如图:

name -> componentName

path -> url

component -> 由上级菜单的componentName加上本级菜单的componentName组成文件路径

meta的title -> menuName

;