需求
切换项目,加载不同的菜单项。
效果:
思路
实现方式
加载的菜单项数据不同,那么要请求接口,根据返回数据渲染菜单。
因此,路由不能通过 菜单管理
方式添加,也不能在 router.js
中写死,只能用 router.addRoutes()
动态添加。
添加时机
全局监听项目id,切换项目时,触发 router.addRoutes()
。
触发方式:Vuex
路由池
要往侧边栏添加菜单项,即添加到 sidebarRouters
中。
代码
App.vue 全局监听 projectId
src/App.vue
import store from "./store";
computed: {
projectId() {
return this.$route.query.projectId;
},
},
watch: {
// 全局监听项目id
projectId: {
handler(newVal, oldVal) {
if (!newVal || newVal == oldVal) return;
// 请求项目菜单路由
store.dispatch("GeneProAppRoutes", newVal);
},
immediate: true,
},
},
Vuex 中:请求接口、生成路由
src/store/modules/permission.js
import { queryProApps } from "@/api/app_ele.js";
mutations: {
// 在原侧边栏路由的基础上更新路由
UPDATE_SIDEBAR_ROUTES: (state, [routes, insertIndex]) => {
if (!insertIndex) {
state.sidebarRouters = state.sidebarRouters.concat(routes);
} else {
let arr = [...state.sidebarRouters];
arr.splice(insertIndex, 0, ...routes);
state.sidebarRouters = arr;
}
},
// 移除某个侧边栏路由
REMOVE_SIDEBAR_ROUTES: (state, routePath) => {
state.sidebarRouters = state.sidebarRouters.filter(
(item) => item.path !== routePath
);
},
}
actions: {
// 动态路由
GeneProAppRoutes({ commit }, projectId) {
return new Promise((resolve) => {
// 根据项目id生成项目库应用路由列表
queryProApps({ projectId }).then((res) => {
let proAppRoutes = res.data.map((ele) => {
let obj = {
component: () =>
import(
/* webpackChunkName: 'appEle' */ "@/views/data-manage/app-ele/index.vue"
),
name: "AppEle",
meta: {
icon: "chart",
},
};
obj.path = `appEle/${ele.applyId}`;
obj.meta.title = ele.applyName;
return obj;
});
let newRoutes = [
{
path: "/project/data",
component: Layout,
redirect: "noRedirect",
meta: {
menuTitle: `项目空间`,
title: `数据管理`,
icon: "documentation",
},
alwaysShow: true,
},
];
newRoutes[0].children = proAppRoutes;
// router.addRoutes(this.filterDynamicRoutes(newRoutes)) // 后续若加入 permissions 权限校验,则使用此行代码
router.addRoutes(newRoutes);
// 在原路由的基础上清除、更新
commit("REMOVE_SIDEBAR_ROUTES", "/project/data");
commit("UPDATE_SIDEBAR_ROUTES", [newRoutes, 8]);
resolve(newRoutes);
});
});
},
}
注意
先清除后添加路由
src/store/modules/permission.js
中,GeneProAppRoutes
里没有 commit SET_SIDEBAR_ROUTERS
来直接更新 sidebarRouters
,而是先 REMOVE_SIDEBAR_ROUTES
再 UPDATE_SIDEBAR_ROUTES
。
原因是:若不先清除路由,则随着切换项目的增多,sidebarRouters
中会累计越来越多的路由,会报错。
动态路由页面刷新404
参考网上把 404 路由注释掉,就可解决。
但又产生了一个新问题,若输入错误路由地址,就不会显示 404 页面。