1、什么是动态路由?
动态路由,动态即不是写死的,是可变的。我们可以根据自己不同的需求加载不同的路由,做到不同的实现及页面的渲染。动态的路由存储可分为两种,一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。
总结:作为一个Java的后端开发 因为公司需求 也刚接触vue 自己慢慢摸索 终于有了一丝丝效果 作为一个小白 下面有什么说的不对的地方欢迎矫正修改
vue项目实现动态路由的方式大体可分为两种:
1、前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由)
2、后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由)
主要使用到的一些vue技术 vue-router的beforeEach 和addroutes 还有前端element 在这里不使用vuex 后期有小伙伴需要的可以加入使用 建议先把这几个知识点学会 再来看看会好很多 不然很吃力 官网是最好的老师 附: vue router 官网 vue-router
1、创建vueRouter,用公共路由实例化
2、创建需要根据权限筛选的路由对象(在路由对象,添加必要的权限判断字段)
3、登录完成,由后端配合返回当前用户的权限集合
4、筛选出有权限的路由对象,利用vueRouter的addRoutes方法,生成完整路由
5、处理刷新页面导致vueRouter重新实例化导致路由对象不完善 (利用router.beforeEach导航守卫,,利用addRoutes()完善 路由对象 )
6、侧边导航栏相关代码
1、创建vueRouter,用公共路由实例化
2、创建需要根据权限筛选的路由对象(在路由对象,添加必要的权限判断字段)
3、登录完成,由后端配合返回当前用户的权限集合
4、筛选出有权限的路由对象,利用vueRouter的addRoutes方法,生成完整路由
5、处理刷新页面导致vueRouter重新实例化导致路由对象不完善 (利用router.beforeEach导航守卫,,利用addRoutes()完善 路由对象 )
6、侧边导航栏相关代码