## 1、vue项目中require不支持接收动态参数
```javascript
//定义一个函数  直接使用即可
//把字符串变量的component转成真正的组件
_import(file){
  return (resolve) => require(['@/views/'+file+'.vue'], resolve)
}
```
## 2、vue项目中递归编写记录
```javascript
let getMenuList = 请求接口获取的返回值;
let menuTree = function(arr){
	arr.forEach(menu => { 
		if(menu.component**=undefined){
			menu.component = Layout; //Layout是组件
		}else{ 
			menu.component = inber._import(menu.component) //自定义函数将字符串变量的component转成真正的组件
		}
		if(menu.children && menu.children.length){
			menuTree(menu.children);
		}
	});
};
menuTree(getMenuList);
```
## 3、vue-element-admin中使用动态路由进行权限控制刷新后404的问题
### 原因：权限控制的路由模块是动态添加的，而我的404监听路由是写在默认路由里面的，优先级比动态路由高
### 解决方式：
1. 删除404默认路由，当然到时候页面刷新没有找到路由浏览器只会显示空白界面；
2. 想办法把404路由放到动态路由末尾

## 4、vue-element-admin权限控制动态路由我的处理方式
### 查看代码发现动态路由注册是在这里处理的
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/02/20/kuangstudy560f5ccb-e2e6-4c7c-b742-0d38b06ee325.png)
### 于是按框架的逻辑进行以下文件的修改处理
```javascript
// router/index.js
// 保留跟权限控制无关的默认路由
export const constantRouterMap = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/authredirect'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/errorPage/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/errorPage/401'),
    hidden: true
  },
  // { 
  //   path: '*', 
  //   redirect: '/404', 
  //   hidden: true 
  // },
  {
    path: '',
    component: Layout,
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: '数据可视化', icon: 'dashboard', noCache: true }
      }
    ]
  }
]

//异步路由默认为空数组，通过接口异步获取
export const asyncRouterMap = []

```
```javascript
// store/modules/user.js
// 添加menuList状态

```
```javascript
// store/modules/permission.js

import user from './user';

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
        let accessedRouters
		//因为后端的角色设计全部默认为admin  所以只有用户的菜单才是动态的
        if (roles.includes('admin')) {
          accessedRouters = user.state.menuList //获取用户的全局权限菜单
        } else {
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        }
        commit('SET_ROUTERS', accessedRouters) //提交
        resolve()
      })
    }
  }
}
```

在Vue-Element-Admin框架上进行二次开发消耗时间最多的几个问题

总共已有 0 条评论