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】,解决这篇文章中忽略的/没讲清的点。