const state = { items: [ ], isLoadRoutes: false } const mutations = { [types.EXPAND_MENU] (state, menuItem) { if (menuItem.index > -1) { if (state.items[menuItem.index] && state.items[menuItem.index].meta) { state.items[menuItem.index].meta.expanded = menuItem.expanded } } else if (menuItem.item && 'expanded' in menuItem.item.meta) { menuItem.item.meta.expanded = menuItem.expanded } }, [types.ADD_MENU] (state, menuItems) { if (menuItems.length === 0) { state.items = [] } else { generateMenuItems(state.items, menuItems) } }, [types.LOAD_ROUTES] (state) { state.isLoadRoutes = !state.isLoadRoutes } }
路由配置文件router.js
import Vue from 'vue' import Router from 'vue-router' import menuModule from 'vuex-store/modules/menu' Vue.use(Router) export default new Router({ mode: 'hash', // Demo is living in GitHub.io, so required! linkActiveClass: 'is-active', scrollBehavior: () => ({ y: 0 }), routes: [ { path: '/login', component: require('../Login.vue'), meta: { expanded: false, show: false }, name: 'Login' }, { path: 'https://www.jb51.net/', component: require('../views/Home.vue'), meta: { expanded: false, show: false }, children: [ { path: '/nofound', component: require('../404.vue'), name: 'NOFOUND', meta: {show: false} } ] }, ...generateRoutesFromMenu(menuModule.state.items) ] }) // Menu should have 2 levels. function generateRoutesFromMenu (menu = [], routes = []) { for (let i = 0, l = menu.length; i < l; i++) { let item = menu[i] if (item.path) { routes.push(item) } } return routes }
vuex
import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as getters from './getters' import menu from './modules/menu' Vue.use(Vuex) const store = new Vuex.Store({ strict: true, // process.env.NODE_ENV !== 'development', actions, getters, modules: { menu }, mutations: { } }) export default store
actions
export const addMenu = ({ commit }, menuItems) => { if (menuItems.length > 0) { commit(types.ADD_MENU, menuItems) } } export const loadRoutes = ({ commit }) => { commit(types.LOAD_ROUTES) }
getters
const menuitems = state => state.menu.items const isLoadRoutes = state => state.menu.isLoadRoutes export { menuitems, isLoadRoutes }
mutations_type.js
export const ADD_MENU = 'ADD_MENU' export const LOAD_ROUTES = 'LOAD_ROUTES'
因为上面的代码不能直接运行，再次梳理一下思路，
1.创建vue实例的时候，将vuex和vue-router加载，这个时候，vue-router只有登录规则和404规则
2.vuex中state管理的状态对象有，菜单对象menuitems，是否加载过路由loadRoutes ，并提供相应的getters与actions当然还有一些其他的，这里没有列举
3.然后在登录组件中，登录成功后，将服务端传回来之后，调用actions更改state.menuitems,并且中间有格式化的过程，这个过程的代码没有贴出来，主要是由于不同的表涉和服务端返回的数据不一样，，
4.然后调用addRoutes和actions更改已经加载过路由的方法
5.然后为了防止用户直接手动按f5刷新页面，这个时候会重新构建vue实例，而又没有重新登录，所以vuex里面的东西会清空，所以将登录后的数据存放在sessionStroage中，在刷新页面，重新构建vue实例的时候，会有判断
6.之后会渲染侧边栏组件，列出菜单，数据就可以根据state.menuitems来就可以了，我这里没有贴我的，实际根据自己的需求来