【vue】更改角色权限后，实现页面不刷新更改其可展示的导航菜单

登入的角色本身属于领导级别（集团权限），没有下级的不同权限：

切换不同身份（公司），以获得相应部门的不同导航菜单及权限

这里实现：更改角色权限后，实现页面 不刷新 更改其展示出来的 导航菜单

1、在右上角页面代码内，通过后端接口获取子角色（公司）的对应菜单路由（图2中data）
2、将路由数据和自身代码写入方式一样，写入store存储路由数据（参考自己代码首次获取路由后存储数据的方法）
3、通过事件总线$eventBus监听页面路由替换导航
4、清空、重新添加路由$router.addRoutes

导航组件里监听并操作：

代码片：

async toMenuChange(id) {//...省略前面非必要 此处调用自己的接口await getMenuListChange().then((mresult) => {// console.log('得到新路由列表：' , mresult);// 对数据进行改造：const sdata = JSON.parse(JSON.stringify(mresult.data)); const rdata = JSON.parse(JSON.stringify(mresult.data));const sidebarRoutes = this.filterAsyncRouter(sdata);const rewriteRoutes = this.filterAsyncRouter(rdata, false, true);rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });store.commit("SET_ROUTES", rewriteRoutes);store.commit("SET_SIDEBAR_ROUTERS",constantRoutes.concat(sidebarRoutes));store.commit("SET_DEFAULT_ROUTES", sidebarRoutes);store.commit("SET_TOPBAR_ROUTES", sidebarRoutes);// 在事件总线中发布事件 this.$bus.$emit('xxx','传递参数')this.$eventBus.$emit("changeTopBar");// 重置导航resetRouter();this.$router.addRoutes(sidebarRoutes);});
}

this.$eventBus.$on("changeTopBar", () => {// ...
});this.$eventBus.$off(["changeTopBar"]);