iview admin 2.0 动态菜单

1：在src\libs文件夹下新建router-util.js 内容如下：
import {
hasChild,
localRead,
getToken
} from ‘@/libs/util’
import store from ‘@/store’
import Main from ‘@/components/main’
import {
forEach
} from ‘@/libs/tools’

// 加载菜单
export const loadMenu = () => {
let list = []
let data = localRead(‘route’)
if (!data) {
return list
}
// console.log(JSON.parse(data))
// list = JSON.parse(data)
list = formatMenu(JSON.parse(data))
return list
}

// 格式化菜单
export const formatMenu = (list) => {
let res = []
forEach(list, item => {
let obj = {
path: item.path,
name: item.name
}
obj.meta = item.meta
if (item.p_id === 0) {
obj.component = Main
} else {
let data = item.component
// 这里的data应为 /notice/notice.vue 类似的数据，对应的是src/view/下的本地文件
// obj.component = () => import(’@/view/’ + data)
obj.component = (resolve) => {
require([’@/view/’ + data + ‘.vue’], resolve)
}
}
if (hasChild(item)) {
obj.children = formatMenu(item.children)
}
res.push(obj)
})
return res
}

2.在src\api\user.js 下创建 getMenu 获取后台方法
export const getMenu = () => {
return axios.request({
url: ‘admin/login/getRoleMenu’,
method: ‘get’
})
}

3.在src\router\index.js 引用
// 引入加载菜单
import { localSave,localRead} from ‘@/libs/util’
import {loadMenu,formatMenu} from ‘@/libs/router-util’
import { getMenu } from ‘@/api/user’

修改router.beforeEach 方法，具体如下

router.beforeEach((to, from, next) => {
iView.LoadingBar.start()
const token = getToken()
const menu = localRead(‘route’) // 读取路由数据
if (!token && to.name !== LOGIN_PAGE_NAME) {
// 未登录且要跳转的页面不是登录页
next({
name: LOGIN_PAGE_NAME // 跳转到登录页
})
} else if (!token && to.name === LOGIN_PAGE_NAME) {
// 未登陆且要跳转的页面是登录页
next() // 跳转
} else if (token && to.name === LOGIN_PAGE_NAME) {
// 已登录且要跳转的页面是登录页
next({
name: homeName // 跳转到homeName页
})
} else {
store.dispatch(‘getUserInfo’).then(user => {
// 如果本地不存在路由数据则动态获取
if (!menu || menu.length === 0) {
getMenu().then(res => {
var list = []
var menuData = res.data.data
localSave(‘route’, JSON.stringify(menuData))
// 格式化菜单
list = formatMenu(menuData)
// 将404路由动态注入，防止第一次没有路由数据跳转到404,
list.push({
path: ‘*’,
name: ‘error_404’,
meta: {
hideInMenu: true
},
component: () => import(’@/view/error-page/404.vue’)
})
// console.log(list)
// 刷新界面菜单
store.commit(‘updateMenuList’, list)
next()
})
} else {
next()
}
}).catch(() => {
setToken(’’)
next({
name: ‘login’
})
})
}
})

4.删除src\router\routers.js 无用的方法路径，改为后台返回

例子如下：
{“data”:[{“path”:"/system",“p_id”:0,“name”:“系统管理”,“meta”:{“icon”:“logo-buffer”,“title”:“系统管理”,“showAlways”:false},“component”:“Main”,“children”:[{“path”:“user”,“name”:“用户列表”,“p_id”:1,“meta”:{“icon”:“md-person”,“title”:“用户列表”},“component”:“system/user/index”},{“path”:“role”,“name”:“角色权限”,“p_id”:1,“meta”:{“icon”:“md-contacts”,“title”:“角色权限”},“component”:“system/role/index”},{“path”:“menu”,“name”:“菜单管理”,“p_id”:1,“meta”:{“icon”:“md-menu”,“title”:“菜单管理”},“component”:“system/menu/index”},{“path”:“dictionary”,“name”:“数据字典”,“p_id”:1,“meta”:{“icon”:“md-bookmarks”,“title”:“数据字典”},“component”:“system/dictionary/index”},{“path”:“configure”,“name”:“系统配置”,“p_id”:1,“meta”:{“icon”:“ios-settings-outline”,“title”:“系统配置”},“component”:“system/configure/index”}]}],“msg”:“ok”,“code”:200}

5，在src\store\module\app.js 下修改
1.引入文件import { loadMenu } from ‘@/libs/router-util’
2.修改getters方法，如下：
getters: {
menuList: (state, getters, rootState) => getMenuByRouter(loadMenu(), rootState.user.access),
errorCount: state => state.errorList.length
},

3.mutations方法下添加
// 接受前台数组，刷新菜单
updateMenuList(state, routes) {
router.addRoutes(routes);
state.menuList = routes
},