什么是动态路由
在我们进行登录逻辑时会由于不同的身份信息,给定不同的身份权限(这个身份权限是确定的,权限信息一般存放于数据库)将用户信息提交给后端会得到返回结果叫做身份权限认定(一般是由后端完成,前端也是可以完成的),根据用户的权限进行数据的列表渲染叫做动态路由
动态路由分为那种实现方式
后端+前端
后端返回权限路由表数据,前端只有基础路由表数据
通过全局路由守卫,以及 addroute 完成动态添加路由信息
let hasMenus = false //判断是否添加过路由
router.beforeEach((to, from, next) => {
//to: Route: 即将要进入的目标 路由对象
//from: Route: 当前导航正要离开的路由
//next: Function: 一定要调用该方法来 resolve 这个钩子。
//执行效果依赖 next 方法的调用参数。
if (hasMenus) {
//如果有路由,向下执行
next()
} else {
//如果没有,添加动态路由
trendsRouter.forEach(ele => {
router.addRoute(ele)
});
hasMenus = true
next({ ...to, replace: true })
}
})
前端完成(数据、渲染)
(写死路由表一般在一个前端js文件中,身份权限的认定是后端完成的)
前端路由表写死,通过对数据过滤处理得到相应的权限路由表(数据方面)
前端只需要进行匹配身份信息,通过不同的函数,对已有写死路由表的处理得到需要渲染的权限路由表将其渲染即可。(该步骤也在路由守卫中完成)
前端路由表写死,通过按钮级别的渲染控制,完成动态路由(渲染方面)
前端进行渲染数据的时候是将数据挂载在页面dom上完成,如果已有数据但是没有dom,是不会进行数据展示的、也就衍生出了该方法。
对不同身份权限的每个节点进行一个状态信息的存储。(一般我们存在VueX中),依照dom的状态对其节点进行一个渲染与否的判断,即可完成对动态路由按钮级别的控制。