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

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载 本篇文章主要介绍了使用vue-router+vuex的addRoutes方法实现路由动态加载及菜单动态加载的方法。这种方法可以实现在用户登录后，根据用户角色权限动态生成菜单和路由规则，实现了对菜单权限的粗粒度控制。 我们需要了解vue-router的实例是在new vue实例的时候加载的，且必须加载。这意味着，在登录之前，我们不知道用户的权限，因此无法确定路由规则。为了解决这个问题，我们可以使用vuex来实现路由规则与菜单的同步。 最初的思路是，在一开始，就把所有的路由规则加载，然后在登录的时候，取得权限路由，对比两个路由，通过修改权限字段来隐藏菜单。然而，这样做法存在一些问题，例如，如果在后台页面添加了新菜单规则，路由是按模块加载的不同的文件，这时对路由的文件进行新的读写，虽然可以解决问题，但是如果手动在浏览器地址上路由，依然可以访问。 因此，我们需要找到新的方法来解决这个问题。在vue-router 2.2.0以后，官方新增了addRoutes API，专门针对服务端渲染路由。这下问题就比较简单了。我们可以使用addRoutes方法来动态添加路由规则，实现了路由的动态加载。 下面是实现代码的示例： ```javascript let permission = JSON.parse(window.sessionStorage.getItem('permission')) if (permission) { store.commit(ADD_MENU, permission) router.addRoutes(store.state.menu.items) } ``` 在上面的代码中，我们首先获取了用户的权限，然后使用addRoutes方法来添加路由规则。这样，我们可以实现路由的动态加载。 另外，我们还需要在路由的全局钩子上做拦截，以确保用户只能访问自己权限范围内的路由。 ```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方法可以实现路由动态加载及菜单动态加载，实现了对菜单权限的粗粒度控制。