vue-router+vuex addRoutes 实现路由和菜单的动态加载

简介：
基于Vue Router和VUE的addRoutes方法负责实现路由动态加载以及菜单项的动态加载功能本篇文章着重讲述了采用vue-router+vuex库的addRoutes方法实现动态路由和菜单加载的技术方案。通过这种技术手段，在用户登录后能够根据其角色权限动态生成相应的菜单结构以及相应的路由配置规则，并且确保了权限管理的颗粒度，从而实现了对菜单中各项功能权限的精准控制。 我们需要明确vue-router在新Vue启动时的行为模式，以确保其实例能够正常加载。这一过程是必须完成的步骤。这表明，在用户登录前我们无法预知权限信息，因此无法预先确定路由规则的具体设置。为了解决这个问题，我们可以采用VUEX技术来实现对路径和菜单同步的管理。最初的想法是在开始阶段导入所有路由规则配置文件，在用户登录时获取权限相关的路由信息，将这两个路径进行比对分析。通过这种方式可以实现隐藏菜单的目的。然而，这种做法存在一定的局限性，比如当向后端新增一些菜单项时，这些路由是按照模块化的文件结构加载的不同的资源链接，尽管如此，如果能够通过修改相应的内容字段来调整权限设置，则问题可以得到解决。但若用户通过手动修改浏览器路径来实现，则仍然存在一定的风险。因此，我们有必要引入一种新方案以解决这一难题。自vue-router 2.2.0版本起，官方提供了新的addRoutes方法，专为实现服务端路由渲染而设计。至此，这一问题的解决变得相对容易起来。我们能够通过调用addRoutes函数来动态地配置路由策略，从而实现对路由资源的灵活扩展。 下面是实现代码的示例：```javascript let permission = JSON.parse(window.sessionStorage.getItem(permission)) if (permission) { store.commit(ADD_MENU, permission) router.addRoutes(store.state.menu.items) } ```在上述代码中，在获得用户权限的基础上，通过调用该方法实现了动态路由规则的加载。此外，我们需要在所有路由的全局钩子中设置全局拦截机制，以确保用户仅能访问其自身权限范围内的路由。```javascript router.beforeEach((route, redirect, next) => { if (route.path === login) { window.sessionStorage.removeItem(user) window.sessionStorage.removeItem(permission) store.commit(ADD_MENU, []) } let user = JSON.parse(window.sessionStorage.getItem(user)) if (!user && route.path !== login) { next({ path: login }) } else { if (route.name) { next() } else { next({ path: nofound }) } } }) ```在提供的代码示例中，我们调用$beforeEach$钩子用于阻止请求处理路由。当用户未登录或缺乏相应的权限时，将该请求转而引导至登录页面。采用vue-router与vuex结合的addRoutes功能能够支持路由和菜单的动态加载，并负责实现对菜单下不同层级权限的精细管理。