【vue】iView-admin2.0动态菜单路由【版1】
vue项目实现动态路由有俩种方式
一.前端在routers中写好--所有--路由表 <前端控制路由>，登录时根据用户的角色权限来动态的显示菜单路由
二.前端通过调用接口请求拿到当前用户--对应权限的--路由表 <后端处理路由返回>，以动态的显示菜单路由
介绍第二种 （参考资料 segmentfault-大师兄）
左侧菜单可通过 ①本地mock假数据 ②easymock假数据 ③从后台请求返回的数据 方式之一请求而来
介绍方式①本地mock假数据
1.iview-admin的src->mock->data目录下新增菜单路由数据menus-data.js （字段可参照src->router->routers.js中设置）
menus-data.js
export const mockMenuData = [ { 'path': '/multilevel', 'name': 'multilevel', 'meta': { 'icon': 'md-menu', 'title': '多级菜单' }, 'component': 'Main', 'children': [ { 'path': '/level_2_1', 'name': 'level_2_1', 'meta': { 'icon': 'md-funnel', 'title': '二级-1' }, 'component': 'multilevel/level-2-1' }, { 'path': '/level_2_2', 'name': 'level_2_2', 'meta': { 'icon': 'md-funnel', 'showAlways': true, 'title': '二级-2' }, 'component': 'parentView', 'children': [ { 'path': '/level_2_2_1', 'name': 'level_2_2_1', 'meta': { 'icon': 'md-funnel', 'title': '三级' }, 'component': 'multilevel/level-2-2/level-2-2-1' }, { 'path': '/level_2_2_2', 'name': 'level_2_2_2', 'meta': { 'icon': 'md-funnel', 'title': '三级' }, 'component': 'multilevel/level-2-2/level-2-2-2' } ] }, { 'path': '/level_2_3', 'name': 'level_2_3', 'meta': { 'icon': 'md-funnel', 'title': '二级-3' }, 'component': 'multilevel/level-2-3' } ] }, { 'path': '/auth', 'name': 'auth', 'meta': { 'icon': 'md-menu', 'title': '权限设置', 'access': ['super_admin'] }, 'component': 'Main', 'children': [ { 'path': '/role', 'name': 'role', 'meta': { 'icon': 'ios-paper-outline', 'title': '角色' }, 'component': 'auth/role', 'permission': ['add', 'edit'] }, { 'path': '/cmenu', 'name': 'cmenu', 'meta': { 'icon': 'ios-paper-outline', 'title': '菜单' }, 'component': 'auth/cmenu', 'permission': ['add', 'del'] }, { 'path': '/account', 'name': 'account', 'meta': { 'icon': 'ios-paper-outline', 'title': '账号' }, 'component': 'auth/account' } ] }, { 'path': '/lesmessage', 'name': 'lesmessage', 'meta': { 'icon': 'ios-paper', 'title': '留言管理' }, 'component': 'Main', 'children': [ { 'path': '/list', 'name': 'list', 'meta': { 'icon': 'ios-paper', 'title': '数据列表' }, 'component': 'lesmessage/list' } ] } ]
2.src->api->data.js中添加menus-data接口定义（参照iview-admin原有的mock数据接口封装写法）
export const getMockMenuData = () => { return axios.request({ url: 'get_mock_menu_data', method: 'post' }) }
3.src->mock->data.js中添加menus-data请求函数（参照iview-admin原有的mock数据请求函数封装写法）
export const getMockMenuData = req => { return mockMenuData }
4.src->mock->index.js中添加menus-data的Mock导出封装
import { ... , getMockMenuData } from './data'
.
.
.
Mock.mock(/\/get_mock_menu_data/, getMockMenuData)
以上，mock数据定义好了请求接口get_mock_menu_data
5.src->libs目录下新增router-util.js , 用于转化请求的menus-data数据为能被vue识别的路由格式
router-util.js
/** * ①添 * @@新增 定义初始化菜单 */ import store from '@/store' import { getToken, localSave, localRead } from '@/libs/util' // import config from '@/config' import { lazyLoadingCop } from '@/libs/tools' import { getMockMenuData } from '@/api/data' import Main from '@/components/main' // Main 是架构组件，不在后台返回，在文件里单独引入 import parentView from '@/components/parent-view' // parentView 是二级架构组件，不在后台返回，在文件里单独引入 const _import = require('@/router/_import_' + process.env.NODE_ENV)// 获取组件的方法 var gotRouter // 初始化路由 export const initRouter = (vm) => { if (!getToken()) { return } var routerData console.log(gotRouter,!gotRouter, vm,store, 'initRouter') if (!gotRouter) { getMockMenuData().then(res => { routerData = res.data // 后台拿到路由 localSave('dynamicRouter', JSON.stringify(routerData)) // 存储路由到localStorage gotRouter = filterAsyncRouter(routerData) // 过滤路由,路由组件转换 console.log(gotRouter, 'filterAsyncRouter') store.commit('updateMenuList', gotRouter); dynamicRouterAdd() }) } else { gotRouter = dynamicRouterAdd() } return gotRouter } // 加载路由菜单,从localStorage拿到路由,在创建路由时使用 export const dynamicRouterAdd = () => { let dynamicRouter = [] let data = localRead('dynamicRouter') if (!data) { return dynamicRouter } dynamicRouter = filterAsyncRouter(JSON.parse(data)) return dynamicRouter } // @函数: 遍历后台传来的路由字符串，转换为组件对象 export const filterAsyncRouter = (asyncRouterMap) => { const accessedRouters = asyncRouterMap.filter(route => { if (route.component) { if (route.component === 'Main') { // Main组件特殊处理 route.component = Main } else if (route.component === 'parentView') { // parentView组件特殊处理 route.component = parentView } else { // route.component = _import(route.component) route.component = lazyLoadingCop(route.component) } } if (route.children && route.children.length) { route.children = filterAsyncRouter(route.children) } return true }) return accessedRouters }
附： src->libs->toos.js中添加 引入.vue组件的封装函数 （不分环境可用）
// @函数: 引入组件 export const lazyLoadingCop = file => require('@/view/' + file + '.vue').default
附：src-->router中新增_import_development.js和_import_production.js为引入.vue组件的封装 （俩种环境）
_import_development.js
module.default = file => require('@/view/' + file + '.vue').default // vue-loader at least v13.0.0+
_import_production.js
module.exports = file => () => import('@/view/' + file + '.vue')
vux部分updateMenuList更新菜单数据
附：src->store->module->app.js中的mutations添加 updateMenuList 操作 state中的 menuList:[] (添加) 、 getters中menuList修改的获取方式
updateMenuList (state, routes) { // ①添 接受前台数组，刷新菜单
router.addRoutes(routes); // 动态添加路由
state.menuList = routes;
console.log('①updateMenuList添menuList', this);
}
getters: { // menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access), // menuList: (state, getters, rootState) => getMenuByRouter(dynamicRouterAdd(), rootState.user.access), // ①改 通过路由列表得到菜单列表 menuList: (state, getters, rootState) => getMenuByRouter(state.menuList, rootState.user.access), // ①改 通过路由列表得到菜单列表 ... },
src->router->routers.js 主要是左侧菜单的加入
import Main from '@/components/main' import { dynamicRouterAdd } from '@/libs/router-util' // ①添 引入加载菜单 /** * iview-admin中meta除了原生参数外可配置的参数: * meta: { * title: { String|Number|Function } * 显示在侧边栏、面包屑和标签栏的文字 * 使用'{{ 多语言字段 }}'形式结合多语言使用，例子看多语言的路由配置; * 可以传入一个回调函数，参数是当前路由对象，例子看动态路由和带参路由 * hideInBread: (false) 设为true后此级路由将不会出现在面包屑中，示例看QQ群路由配置 * hideInMenu: (false) 设为true后在左侧菜单不会显示该页面选项 * notCache: (false) 设为true后页面在切换标签后不会缓存，如果需要缓存，无需设置这个字段，而且需要设置页面组件name属性和路由配置的name一致 * access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由 * icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_' * beforeCloseName: (-) 设置该字段，则在关闭当前tab页时会去'@/router/before-close.js'里寻找该字段名对应的方法，作为关闭前的钩子函数 * } */ // 不作为Main组件的子页面展示的页面单独写 export const otherRouter = [{ path: '/login', name: 'login', meta: { title: 'Login - 登录', hideInMenu: true }, component: () => import('@/view/login/login.vue') }, { path: '/401', name: 'error_401', meta: { hideInMenu: true }, component: () => import('@/view/error-page/401.vue') }, { path: '/500', meta: { title: '500-服务端错误' }, name: 'error_500', component: () => import('@/view/error-page/500.vue') } ]; // 作为Main组件的子页面展示但是不在左侧菜单显示的路由写在mainRouter里 export const mainRouter = [{ path: '/', name: '_home', redirect: '/home', component: Main, meta: { hideInMenu: true, notCache: true }, children: [ { path: '/home', name: 'home', meta: { hideInMenu: true, title: '首页', notCache: true, icon: 'md-home' }, component: () => import('@/view/single-page/home') } ] }, { path: '/message', name: 'message', component: Main, meta: { hideInBread: true, hideInMenu: true }, children: [ { path: 'message_page', name: 'message_page', meta: { icon: 'md-notifications', title: '消息中心' }, component: () => import('@/view/single-page/message/index.vue') } ] }]; // 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里 export const appRouter = [...dynamicRouterAdd()]; export const routes = [ ...otherRouter, ...mainRouter, ...appRouter ] // 所有上面定义的路由都要写在下面输出 export default routes
src->main.js 实例化对象 添加挂载时的动态路由调用
. . . import { initRouter } from '@/libs/router-util' // ①新增 引入动态菜单渲染 . . . new Vue({ . . . mounted() { initRouter(this); // ①新增 调用方法,动态生成路由 }, . })
登录菜单未渲染，可在路由跳转前执行一次initRouter (此方案舍去) src->router->routers.js
import { initRouter } from '@/libs/router-util'
.
.
.
const turnTo = (to, access, next) => {
initRouter();
...
};
登录菜单未渲染，可在路由跳转前执行一次initRouter(此方案体验更佳,解决附加6的问题) src->router->routers.js
import { InitRouter } from '@/libs/router-util'
...
router.beforeEach((to, from, next) => {
.
if (!token && to.name !== LOGIN_PAGE_NAME) {
// 未登录且要跳转的页面不是登录页
.
} else if (!token && to.name === LOGIN_PAGE_NAME) {
// 未登陆且要跳转的页面是登录页
InitRouter() // 登录页刷新重新获取,确保路由跳转前即beforeEach获取到动态路由表
next() // 跳转
} else if (token && to.name === LOGIN_PAGE_NAME) {
// 已登录且要跳转的页面是登录页
.
} else {
.
}
})
以上。动态载入请求本地mock菜单路由结束。
介绍方式 ②easymock假数据
1.使用easy-mock,创建项目，复制项目Base URL
2.配置proxy (在vue.config.js中)
devServer: { proxy: { '/mock': { // easymock跨域请求配置 target: 'easy-mock项目的Base URL', changeOrigin: true, pathRewrite: {'^/mock': '/'} } } }
3.配置package.json脚本
"easy-mock": "node build/dev-server.js mock",
4.配置api请求基础路径baseUrl(在src->config->index.js中)
/** * @description api请求基础路径 */ baseUrl: { dev: '步骤2中的easymock项目地址Base URL', pro: 'https://produce.com' },
之后就是接口封装和使用了。（可参照iview-admin原本写mock假数据的封装写法及使用）
5.附加 easy-mock工具使用
6.附加 vue 解决addRoutes动态添加路由后，刷新失效问题
备注：这篇文章属于一边摸索一边写下的，有出现问题会修改一些步骤，基本原理已经表现。
在此文章基础上加写一篇，iView-admin2.0动态菜单路由【版2】，解决这篇文章中忽略的/没讲清的点。
smile蓿苜
