1、添加store
我们先添加几个store状态，后续需要用来共享使用
首先，我们在store/modules下的app.js中添加一个menuRouteLoaded状态，来判断是否加载过路由
然后在store、modules下新建一个menu.js，在index.js中引入，里面保存加载后的导航菜单数据。
menu.js代码如下：
export default {
state: {
navTree: [], // 导航菜单树
},
getters: {
},
mutations: {
setNavTree(state, navTree){ // 设置导航菜单树
state.navTree = navTree;
}
},
actions: {
}
}
在store/modules下新建一个user.js，在index.js中引入，里面保存加载后的用户权限数据。
user.js代码如下：
export default {
state: {
perms: [], // 用户权限标识集合
},
getters: {
},
mutations: {
setPerms(state, perms){ // 用户权限标识集合
state.perms = perms;
}
},
actions: {
}
}
index.js引入后的代码如下：
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
// 引入子模块
import app from './modules/app'
import user from './modules/user'
import menu from './modules/menu'
const store = new vuex.Store({
modules: {
app: app,
user: user,
menu: menu
}
})
export default store
2、登录页面
打开登录页面Login.vue, 在登录接口设置菜单加载状态，要求重新登录之后重新加载菜单，
3、导航守卫
路由对象router给我们提供beforeEach方法，可以在每次路由之前进行一些相关处理，也叫导航守卫，我们这里就通过导航守卫实现动态菜单的加载。
修改router/index.js文件，添加导航守卫，在每次路由时判断用户会话是否过期。如果登录有效且跳转到登录界面，就直接路由到主页；如果是非登录页面且会话过期，就跳到登录页面要求登录；否则，加载动态菜单和路由并路由到目标页面。
下面是router下index.js代码
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'
import api from '@/http/api'
import store from '@/store'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: '首页',
component: Home,
children: []
},
{
path: '/login',
name: '登录',
component: Login
},
{
path: '/404',
name: 'notFound',
component: NotFound
}
]
})
router.beforeEach((to, from, next) => {
// 登录界面登录成功之后，会把用户信息保存在会话
// 存在时间为会话生命周期，页面关闭即失效。
let userName = sessionStorage.getItem('user')
if (to.path === '/login') {
// 如果是访问登录界面，如果用户会话信息存在，代表已登录过，跳转到主页
if(userName) {
next({ path: '/' })
} else {
next()
}
} else {
if (!userName) {
// 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
next({ path: '/login' })
} else {
// 加载动态菜单和路由
addDynamicMenuAndRoutes(userName, to, from)
next()
}
}
})
/**
* 加载动态菜单和路由
*/
function addDynamicMenuAndRoutes(userName, to, from) {
if(store.state.app.menuRouteLoaded) {
console.log('动态菜单和路由已经存在.')
return
}
api.menu.findNavTree({'userName':userName})
.then(res => {
// 添加动态路由
let dynamicRoutes = addDynamicRoutes(res.data)
router.options.routes[0].children = router.options.routes[0].children.concat(dynamicRoutes)
router.addRoutes(router.options.routes)
// 保存加载状态
store.commit('menuRouteLoaded', true)
// 保存菜单树
store.commit('setNavTree', res.data)
}).then(res => {
api.user.findPermissions({'name':userName}).then(res => {
// 保存用户权限标识集合
store.commit('setPerms', res.data)
})
})
.catch(function(res) {
})
}
/**
* 添加动态(菜单)路由
* @param {*} menuList 菜单列表
* @param {*} routes 递归创建的动态(菜单)路由
*/
function addDynamicRoutes (menuList = [], routes = []) {
var temp = []
for (var i = 0; i < menuList.length; i++) {
if (menuList[i].children && menuList[i].children.length >= 1) {
temp = temp.concat(menuList[i].children)
} else if (menuList[i].url && /\S/.test(menuList[i].url)) {
menuList[i].url = menuList[i].url.replace(/^\//, '')
// 创建路由配置
var route = {
path: menuList[i].url,
component: null,
name: menuList[i].name,
meta: {
icon: menuList[i].icon,
index: menuList[i].id
}
}
try {
// 根据菜单URL动态加载vue组件，这里要求vue组件须按照url路径存储
// 如url="sys/user"，则组件路径应是"@/views/sys/user.vue",否则组件加载不到
let array = menuList[i].url.split('/')
let url = ''
for(let i=0; i<array.length; i++) {
url += array[i].substring(0,1).toUpperCase() + array[i].substring(1) + '/'
}
url = url.substring(0, url.length - 1)
route['component'] = resolve => require([`@/views/${url}`], resolve)
} catch (e) {}
routes.push(route)
}
}
if (temp.length >= 1) {
addDynamicRoutes(temp, routes)
} else {
console.log('动态路由加载...')
console.log(routes)
console.log('动态路由加载完成.')
}
return routes
}
export default router
4、导航树组件
在components目录下新建一个导航树组件MenuTree,如下图：
代码如下：
<template>
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="'' + menu.id">
<template slot="title">
<i :class="menu.icon" ></i>
<span slot="title">{ {menu.name}}</span>
</template>
<MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
</el-submenu>
<el-menu-item v-else :index="'' + menu.id" @click="handleRoute(menu)">
<i :class="menu.icon"></i>
<span slot="title">{ {menu.name}}</span>
</el-menu-item>
</template>
<script>
import { getIFrameUrl, getIFramePath } from '@/utils/iframe'
export default {
name: 'MenuTree',
props: {
menu: {
type: Object,
required: true
}
},
methods: {
handleRoute (menu) {
// 通过菜单URL跳转至指定路由
this.$router.push("/" + menu.url)
}
}
}
</script>
<style scoped lang="scss">
</style>
5、在navBar.vue中添加导航菜单
添加后代码如下：
<template>
<div class="menu-bar-container">
<!-- logo -->
<div class="logo" :style="{'background':themeColor}" @click="$router.push('/')"
:class="collapse?'menu-bar-collapse-width':'menu-bar-width'">
<img v-if="collapse" src="@/assets/logo.png"/> <div>{ {collapse?'':appName}}</div>
</div>
<!-- 导航菜单 -->
<el-menu ref="navmenu" default-active="1" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
:collapse="collapse" :collapse-transition="false" :unique-opened="true "
@open="handleopen" @close="handleclose" @select="handleselect">
<!-- 导航菜单树组件，动态加载菜单 -->
<menu-tree v-for="item in navTree" :key="item.id" :menu="item"></menu-tree>
</el-menu>
</div>
</template>
<script>
import { mapState } from 'vuex'
import MenuTree from "@/components/MenuTree"
export default {
components:{
MenuTree
},
computed: {
...mapState({
appName: state=>state.app.appName,
themeColor: state=>state.app.themeColor,
collapse: state=>state.app.collapse,
navTree: state=>state.menu.navTree
})
},
methods: {
handleopen() {
console.log('handleopen')
},
handleclose() {
console.log('handleclose')
},
handleselect(a, b) {
console.log('handleselect')
}
}
}
</script>
<style scoped lang="scss">
.menu-bar-container {
position: fixed;
top: 0px;
left: 0;
bottom: 0;
z-index: 1020;
.el-menu {
position:absolute;
top: 60px;
bottom: 0px;
text-align: left;
// background-color: #2968a30c;
}
.logo {
position:absolute;
top: 0px;
height: 60px;
line-height: 60px;
background: #545c64;
cursor:pointer;
img {
width: 40px;
height: 40px;
border-radius: 0px;
margin: 10px 10px 10px 10px;
float: left;
}
div {
font-size: 25px;
color: white;
text-align: left;
padding-left: 20px;
}
}
.menu-bar-width {
width: 200px;
}
.menu-bar-collapse-width {
width: 65px;
}
}
</style>
好了，到此我们已经完成了动态菜单，下面我们进行测试
启动项目后，我们访问：http://localhost:8080/#/login，点击登录
可以看到我们菜单已经加载好了
好啦，到此我们完成了动态菜单加载
看完记得点赞哦