方式处理路由,后端返回的路由数据上需要标识组件在前端项目目录中的具体位置(上文一直使用的componentPath字段)。使用此方式,编译时就已经显示import的组件会被单独打包,而其它全部组件会被打包在一起(不管运行时是否使用到相应的组件),404路由对应的组件会被打包两次。
使用
route.component = () => import(`../${route.componentPath}.vue`)方式处理路由,后端返回的路由数据上也需要标识组件在前端项目目录中的具体位置。使用此方式,所有的组件会被单独打包,不管是否使用。
所以,处理后端返回的路由,推荐使用第一种和第三种方式。
第一种方式,前端需要维护一份路由-组件列表(routerMapComponents.js),当相关人员维护路由的时候,前端开发需要将相应的key给出,当然也可以由维护路由的人确定key后交由前端开发。
第三种方式,前端不需要维护任何东西,只需要告诉维护路由的人相应的组件在前端项目中的路径即可,这可能会导致泄露前端项目结构,因为在打包后的代码总是可以看到的。
总结菜单与路由完全由后端提供,菜单与路由数据分离,菜单与路由上分别标上权限标识,后端根据用户权限筛选出用户所能访问的菜单与路由,前端拿到路由数据后作相应的处理,使得路由正确的匹配上相应的组件。这应该是一种比较“完美”的vue权限路由实现方案。
有的人可能会说,既然已经前后端分离,为什么还要那么依赖于后端?
菜单与路由不由后端提供,权限过滤的时候,不还是需要后端返回的权限列表,而且权限标识还写死在菜单和路由上。
而菜单与路由完全由后端提供,并不是说前端开发要与后端开发需要更多的交流(扯皮)。菜单与路由可以做相应的维护功能,比如支持批量导出与导入,添加新菜单或路由的时候,在页面功能上进行操作即可。唯一的沟通成本就是维护路由的时候需要知道前端维护组件列表的key或者组件对应的路径,但路由也完全可以由前端开发去维护,权限标识可以待前后端确认后再维护(当然,页面上元素级别的权限控制的权限标识,还是得提前确认)。而如果菜单与路由写死在前端,一开始前后端就得确认相应的权限标识。