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，点击登录
?
?可以看到我们菜单已经加载好了
好啦，到此我们完成了动态菜单加载
看完记得点赞哦