导航菜单存储
sessionStorage
允许在浏览器中以KEY:VALUE形式存储响应数据，当前页面关闭后sessionStorage中存储的数据被清除。
sessionStorage.setItem(key,value);//在sessionStorage中存储数据sessionStorage.getItem(key);//从sessionStorage中读取数据localStorage
允许在浏览器中以KEY:VALUE形式存储响应数据，当前页面关闭后localStorage中存储的数据依然存在。无过期时间限制，直到手动删除localStorage中的数据。
localStorage.setItem(key,value);//在localeStorage中存储数据localStorage.getItem(key);//从localeStorage中读取数据localStorage.removeItem(key);//从localStorage中删除指定数据localStorage.clear();//清除localStorage中的所有数据VUEX
通常的VUE组件中，包含视图(template),双向绑定的数据(data),方法(methods),以上三个属性都定义在同一个VUE组件中。视图(View)触发动作(Actions),动作(Actions)影响数据状态(state),数据状态(state)的变更导致更新视图(VIEW),在当前组件中形成闭环操作。当前组件触发动作只能操作当前组件数据，当前组件数据状态发生变更只能更新当前组件视图。无法实现多个组件通过动作操作同一个数据，同一个数据状态发生了变更影响多个组件的视图更新。
为了实现上述功能，我们需要将组件数据(data)抽取为全局数据(state)，需要使用全局数据的组件都可以访问到全局数据，当中某个组件触发动作(mutations)使全局数据(state)发生更改，需要使用全局数据(state)的组件视图(view)也会发生更新。
VUE体系中使用VUEX来管理VUE组件需要使用的公共数据。因为导航菜单在VUE所有组件中都需要使用，所以将导航菜单响应数据通过VUEX的方式来进行存储。
VUEX在一个VUE工程中只能有一个全局实例对象(store)。store被称为仓库，用于保存需要使用的公共数据。任何组件都可以访问公共数据(state)，也可以对公共数据进行修改(mutations)。
VUEX使用
VUEX安装
npm install vuexVUEX配置项state
存储状态(需要操作的公共数据变量)。
mutations
提交状态修改。VUEX中唯一进行状态(state)修改的地方，非异步方式执行操作。
actions
提交状态修改(mutations),可以以异步方式执行操作。
getter
派生状态。作用等同于VUE组件的计算属性(computed)。
modules
store子模块，相当于store的实例。
保存菜单数据
store/index.js
import Vue from "vue"import Vuex from "vuex"//用以管理应用状态Vue.use(Vuex);export default new Vuex.Store({ state:{ //响应数据数组(菜单项) routes:[] }, mutations:{ /* 响应数据数组赋值 state:存储状态(可以不传) data:响应数据 最多两个参数 */ initRoutes(state,data) { state.routes=data; } }, actions:{}})加载菜单请求封装
utils/menus.js
import {getRequest} from "./api";/** * 实例化菜单项并赋值给公共数据 * @param router：VUE路由对象 * @param store: 仓库(用于保存公共数据) */export const initMenu = (router, store) => { //如果仓库的状态(state)中的全局变量routes(保存导航菜单公共数据)的长度大于0，说明有导航菜单数据，无需发送请求 if (store.state.routes.length > 0) { return; } getRequest("/system/menuInit/initMenu").then(data => { if (data) { let fmtRoutes = formatMenus(data);//获取格式化菜单项数组 router.addRoutes(fmtRoutes);//将格式化菜单项数组添加至VUE路由对象 store.commit('initMenu', fmtRoutes);//将格式化菜单项添加在共享数据 store.dispatch('connect'); } })}/** * 格式化菜单项数据并添加至菜单项数组 * @param routes：响应菜单项数据 * @returns 格式化菜单项数组 */export const formatMenus = (menus) => { let fmMenus = [];//格式化菜单项数组 menus.forEach(menu => { //批量定义菜单项变量并赋值 let { url, path, component, name, meta, iconCls, children } = menu; //如果包含子菜单属性并且子菜单属性类型为数组，进行递归调用 if (children && children instanceof Array) { children = formatMenus(children); } //格式化VUE路由对象 let fmRouter = { url:url, path: path, name: name, iconCls: iconCls, meta: meta, children: children, component(resolve) { //使用require动态导入对应VUE组件对象(后端响应数据中component为字符串，此处应该拼接为VUE组件路径) if (component.startsWith("Home")) { require(['../views/' + component + '.vue'], resolve); } else if (component.startsWith("User")) { require(['../views/user/' + component + '.vue'], resolve); } else if (component.startsWith("Basic")) { require(['../views/basic/' + component + '.vue'], resolve); } else if (component.startsWith("System")) { require(['../views/system/' + component + '.vue'], resolve); } } } fmMenus.push(fmRouter);//菜单项格式化数组中添加格式化菜单项数据 }) return fmMenus;//返回格式化菜单项数组}在util/menu.js中我们主要完成请求后端菜单项数据、格式化菜单项、将格式化后的菜单项数据添加至VUE路由(router)对象并赋值给共享数据相关功能。
请求后端菜单项数据
import {getRequest} from "./api";/** * 实例化菜单项并赋值给公共数据 * @param router：VUE路由对象 * @param store: 仓库(用于保存共享数据) */export const initMenu = (router, store) => { //如果仓库的状态(state)中的全局变量routes(保存导航菜单共享数据)的长度大于0，说明有导航菜单数据，无需发送请求 if (store.state.routes.length > 0) { return; } //发送请求获取导航菜单共享数据 getRequest("/system/menuConfig/initMenu").then(data => { if (data) { //对响应数据(导航菜单)进行格式化，添加至VUE路由(router)对象并赋值给共享数据 } })}格式化菜单项
在格式化菜单项的过程中，我们需要将后端响应数据中的component字符串转化为VUE组件对象，并动态导入VUE组件(无需在router/index.js中通过import导入相关VUE组件)。
/** * 格式化菜单项数据并添加至菜单项数组 * @param routes：响应菜单项数据 * @returns 格式化菜单项数组 */export const formatMenus = (menus) => { let fmMenus = [];//格式化菜单项数组 menus.forEach(menu => { //批量定义菜单项变量并赋值 let { url, path, component, name, meta, iconCls, children } = menu; //如果包含子菜单属性并且子菜单属性类型为数组，进行递归调用 if (children && children instanceof Array) { children = formatMenus(children); } //格式化VUE路由对象 let fmRouter = { url:url, path: path, name: name, iconCls: iconCls, meta: meta, children: children, component(resolve) { //使用require动态导入对应VUE组件对象(后端响应数据中component为字符串，此处应该拼接为VUE组件路径) if (component.startsWith("Home")) { require(['../views/' + component + '.vue'], resolve); } else if (component.startsWith("User")) { require(['../views/user/' + component + '.vue'], resolve); } else if (component.startsWith("Basic")) { require(['../views/basic/' + component + '.vue'], resolve); } else if (component.startsWith("System")) { require(['../views/system/' + component + '.vue'], resolve); } } } fmMenus.push(fmRouter);//菜单项格式化数组中添加格式化菜单项数据 }) return fmMenus;//返回格式化菜单项数组}将菜单项数据添加至VUE路由对象，并赋值给共享变量
getRequest("/system/menuConfig/initMenu").then(data => { if (data) { let fmtRoutes = formatMenus(data);//获取格式化菜单项数组 router.addRoutes(fmtRoutes);//将格式化菜单项数组添加至VUE路由对象(动态导入VUE组件) store.commit('initMenus', fmtRoutes);//将格式化菜单项添加在共享数据 store.dispatch('connect'); } })导航菜单加载
初始化菜单时机
在将加载菜单请求封装完成后，我们需要调用initMenu函数进行菜单初始化，并对导航菜单进行渲染。通常情况下，我们会在登录成功后对initMenu函数进行调用，由于我们需要导航菜单在所有VUE组件中都需要进行使用，登录成功后调用initMenu函数菜单初始化加载成功，在登录成功后跳转的组件或其他VUE组件中按下F5或浏览器刷新按钮，initMenu函数不会在执行，导致导航菜单无法成功加载并初始化。此时需要引入VUE路由导航守卫机制。
路由导航守卫
导航指路由(vue路由对象组件间跳转)在发生改变。导航守卫用来对组件跳转的过程进行监听，并执行相关的操作。
此处需要使用全局前置守卫对组件路由进行监听。
/*全局导航守卫导航：表示路由信息正在发生改变导航守卫：导航开始变化到导航变化结束过程中，根据导航变化做出响应to:去哪里from:从哪来next:往下走 */router.beforeEach((to, from, next) => { //目的地路径为'/'表示登出 if (to.path == '/') { next(); }else { /* sessionStorage.getItem("user"):sessionStorage中存在登录用户信息 */ if(window.sessionStorage.getItem("user")){ initMenu(router,store); next(); } else { Message.error({message: '无法在未登录情况下对系统进行操作，请登录'}); //登录成功后重定向至未登录前浏览器请求路径 next('/?redirect='+to.path); } }})初始化菜单
Home.vue
在登陆成功后跳转的组件中，通过计算属性(computed)定义的方法返回仓库中存在的共享数据，在组件中进行渲染。
<el-menu router unique-opened> <el-submenu :index="index+''" v-for="(item,index) in routes" v-if="!item.hidden" :key="index"> <template slot="title"> <i style="color: #409eff;margin-right: 5px" :class="item.iconCls">i> <span>{{item.name}}span> template> <el-menu-item :index="child.path" v-for="(child,indexj) in item.children" :key="indexj"> {{child.name}} el-menu-item> el-submenu> el-menu> //VUE实例中的计算属性 computed: { routes() { //返回Vuex中的共享菜单响应数据 return this.$store.state.routes; } },执行登出操作时，需要对VUEX中的共享数据进行清空，否则切换登录用户(角色加载菜单不同)加载的还是共享数据中存储的菜单项。
this.getRequest('/logout'); window.sessionStorage.removeItem('user');//从sessionStorage中移除当前登录用户信息 //登出时从仓库中清空菜单项 this.$store.commit('initMenu', []); this.$router.replace('/');
