项目中菜单路由的动态搭建
1、请求接口getMenu(在beforeEach中请求)
router目录下index.js 封装路由公用及静态路由部分
import Vue from "vue";
import Router from "vue-router";
import Layout from "@/views/layout/Layout";
Vue.use(Router);
export const constantRouterMap = [
{
path: "/401",
component: () => import("@/views/error-page/401"),
hidden: true
},
{
path: "/404",
component: () => import("@/views/error-page/404-new"),
hidden: true
},
{
path: "/305",
component: () => import("@/views/error-page/305"),
hidden: true
}
];
export default new Router({
mode: "history",
scrollBehavior: () => ({
y: 0
}),
routes: constantRouterMap
});
封装动态路由及菜单数据部分
import router from "./router";
import store from "./store";
import { getMenu } from "./api/login";
router.beforeEach((to, from, next) => {
let res = getMenu({
});
const arr = res.data.data
let menuArr = parseJsonMenu(arr)
const routeObj =JSON.parse(JSON.stringify(arr));
store.dispatch("generateRoutes", routeObj).then(() => {
router.addRoutes(store.getters.addRouters);
next({
...to,
replace: true
});
});
store.dispatch("setMenu", menu);
})
vuex中的 generateRoutes
import { constantRouterMap } from "@/router";
const _PERMISSION = {
state: {
routers: constantRouterMap,
addRouters: []
},
mutations: {
setRouters: (state, routers) => {
state.addRouters = routers;
state.routers = constantRouterMap.concat(routers);
state.routers.push({ path: "*", redirect: "/" });
}
},
getters: {
addRouters: state => {
return state.addRouters;
}
},
actions: {
generateRoutes({ commit }, response) {
let asyncRouters = filterAsyncRouter(response)
asyncRouters.push({ path: "*", redirect: "/404", hidden: true });
const routers = [];
asyncRouters.forEach(item => {
if (item.children && item.children.length) {
let arr = [];
item.children.forEach(itemSub => {
arr = arr.concat(itemSub.children);
});
item.children = arr;
}
routers.push(item);
});
commit("setRouters", routers);
}
}
};
function filterAsyncRouter(routers) {
let accessedRouters = routers.filter(router => {
});
return accessedRouters;
}
function loadView(view) {
return () => import(`@/views/${view}`);
}
function getRedirect(sons) {
if(){
return getRedirect(sons[0].sons);
}
}
export default _PERMISSION;
菜单也同样用vuex进行存储 【这里不详细写了】