之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结，下面说说目前我认为比较“完美”的一种方案：菜单与路由完全由后端提供。
菜单与路由完全由后端返回这种方案前文也有提过，现在更加具体的说一说。
很多人喜欢把路由处理成菜单，或者把菜单处理成路由(我之前也是这样做的)，最后发现挖的坑越来越深。
应用的菜单可能是两级，可能是三级，甚至是四到五级，而路由一般最多不会超过三级。如果应用的菜单达到五级，而用两级路由就可以就解决的情况下，为了能根据路由生成相应的菜单，有的人会弄出个五级路由出来。。。
所以墙裂建议，菜单数据与路由数据独立开，只要能根据菜单跳转到相应的路由即可。
菜单与路由都由后端提供，就需要就菜单与路由做相应的的维护功能。菜单上一些属性也是必须的，比如标题、跳转路径(也可以用跳转名称，对应路由名称即可，因为vue路由能根据名称进行跳转)。路由数据维护vue路由所需字段即可。
当然，做权限控制还得在菜单和路由上都维护相应的权限码，后端根据用户的权限过滤出用户能访问的菜单与路由。
下面是一份由后端返回的菜单和路由例子
let permissionMenu = [ { title: "系统", path: "/system", icon: "folder-o", children: [ { title: "系统设置", icon: "folder-o", children: [ { title: "菜单管理", path: "/system/menu", icon: "folder-o" }, { title: "路由管理", path: "/system/route", icon: "folder-o" } ] }, { title: "权限管理", icon: "folder-o", children: [ { title: "功能管理", path: "/system/function", icon: "folder-o" }, { title: "角色管理", path: "/system/role", icon: "folder-o" }, { title: "角色权限管理", path: "/system/rolepermission", icon: "folder-o" }, { title: "角色用户管理", path: "/system/roleuser", icon: "folder-o" }, { title: "用户角色管理", path: "/system/userrole", icon: "folder-o" } ] }, { title: "组织架构", icon: "folder-o", children: [ { title: "部门管理", path: "", icon: "folder-o" }, { title: "职位管理", path: "", icon: "folder-o" } ] }, { title: "用户管理", icon: "folder-o", children: [ { title: "用户管理", path: "/system/user", icon: "folder-o" } ] } ] } ] let permissionRouter = [ { name: "系统设置", path: "/system", component: "layoutHeaderAside", componentPath:'layout/header-aside/layout', meta: { title: '系统设置' }, children: [ { name: "菜单管理", path: "/system/menu", meta: { title: '菜单管理' }, component: "menu", componentPath:'pages/sys/menu/index', }, { name: "路由管理", path: "/system/route", meta: { title: '路由管理' }, component: "route", componentPath:'pages/sys/menu/index', } ] }, { name: "权限管理", path: "/system", component: "layoutHeaderAside", componentPath:'layout/header-aside/layout', meta: { title: '权限管理' }, children: [ { name: "功能管理", path: "/system/function", meta: { title: '功能管理' }, component: "function", componentPath:'pages/sys/menu/index', }, { name: "角色管理", path: "/system/role", meta: { title: '角色管理' }, component: "role", componentPath:'pages/sys/menu/index', }, { name: "角色权限管理", path: "/system/rolepermission", meta: { title: '角色权限管理' }, component: "rolePermission", componentPath:'pages/sys/menu/index', }, { name: "角色用户权限管理", path: "/system/roleuser", meta: { title: '角色用户管理' }, component: "roleUser", componentPath:'pages/sys/menu/index', }, { name: "用户角色权限管理", path: "/system/userrole", meta: { title: '用户角色管理' }, component: "userRole", componentPath:'pages/sys/menu/index', } ] }, { name: "用户管理", path: "/system", component: "layoutHeaderAside", componentPath:'layout/header-aside/layout', meta: { title: '用户管理' }, children: [ { name: "用户管理", path: "/system/user", meta: { title: '用户管理' }, component: "user", componentPath:'pages/sys/menu/index', } ] } ]可以看到菜单最多达到三级，路由只有两级，通过菜单上的path与路由的path相对应，当点击菜单的时候就能正确的跳转。
有个小技巧：在路由的meta上维护一个title属性，在页面切换的时候，如果需要动态改变浏览器标签页的标题，可以直接从当前路由上取到，不需要到菜单上取。
菜单数据可以作为左侧菜单的数据源，也可以是顶部菜单的数据源。有的系统内容比较多，顶部可能是系统模块，左侧是模块下的菜单，切换顶部不同模块，左侧菜单要动态进行切换。做类似功能的时候，因为菜单数据与路由分开，只要关注与菜单即可，比如在菜单上加上模块属性。