运营后台动态路由（element ui）

路由文件

 

 

store中配置文件

import { asyncRoutes, constantRoutes } from '@/router';
import { getRouterList } from '@/api/user';
import Layout from '@/layout';
const _import = file => require(`@/views/${file}/index.vue`).default;
/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */

export function generaMenu(routes, data) {
  data.forEach(item => {
    // console.log(item.componentPath);
    const menu = {
      path: item.routerPath,
      hidden: !item.available,
      children: [],
      meta: { icon: item.icon, title: item.resourceName }
    };
    // if (item.componentPath) {
      // 判断 item.componentPath 是否等于 'Layout',若是则直接替换成引入的 Layout 组件
    if (item.componentPath === 'Layout') {
      menu.component = Layout;
      menu.meta = { icon: item.icon, title: item.resourceName };
    } else {
      //  item.componentPath 不等于 'Layout',则说明它是组件路径地址，因此直接替换成路由引入的方法
      try {
        menu.component = _import(item.componentPath);
        menu.name = item.routerPath.indexOf('/') === 0 ? item.routerPath.substring(0) : item.routerPath;
        menu.meta = item.routerPath.indexOf('/') === 0 ? null : { icon: item.icon, title: item.resourceName };
        // 此处用reqiure比较好，import引入变量会有各种莫名的错误
        // menu.component = (() => import(`@/views/${item.componentPath}`));
      } catch (e) {
        console.log(e);
        menu.component = null;
      }
    }
    // }
    if (item.children && item.children.length > 0) {
      generaMenu(menu.children, item.children);
    }
    if (item.children.length > 1) {
      menu.redirect = `${item.routerPath}/${item.children[0].routerPath}`;
    }
    // console.log('组件位置', menu.path);
    routes.push(menu);
  });
  // console.log(routes);
  return routes;
}

const state = {
  routes: [],
  addRoutes: []
};

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes;
    state.routes = constantRoutes.concat(routes);
  }
};

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // 先查询后台并返回左侧菜单数据并把数据添加到路由
      getRouterList().then(res => {
        const menuData = Object.assign([], res.body);
        const tempAsyncRoutes = Object.assign([], asyncRoutes);
        const accessedRoutes = generaMenu(tempAsyncRoutes, menuData);
        // console.log('路由', accessedRoutes);
        commit('SET_ROUTES', accessedRoutes);
        resolve(accessedRoutes);
      });
    });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

 

路由拦截中