没有比这个更全的了吧，哈哈哈哈哈哈哈，话不多说，看代码
一、router文件下的index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import login from '../views/login.vue'
import index from '../views/index.vue'
import personal from '../views/personal.vue'
Vue.use(Router)
var router = new Router({
routes:[
{
path: '/',
redirect: '/Login'
},
{
path: '/Login',
name: 'Login',
component: (resolve) => require(['@/views/login'],resolve)
},
{
path: '/Home',
name: 'Home',
meta: {
requireAuth: true
},
component: () => import( '@/views/Home'),
// component:Home,
children:[
{
path: '/index',
name: 'index',
meta: {
requireAuth: true
},
component: () => import( '@/views/index')
},
{
path: '/personal',
name: 'personal',
component: (resolve) => require(['@/views/personal'],resolve)
},
{
path: '/orderDetail',
name: 'orderDetail',
component: (resolve) => require(['@/views/orderDetail'],resolve)
}
]
}
]
})
router.$addRoutes = (params) => {
router.matcher = new Router({mode:'history'}).matcher
router.addRoutes(params)
}
export default router
二、router文件下新建一个关于动态路由的js文件(dongRouter.js)
import router from './index'
import store from './../store'
function createRouterDiGui (arr) {
const subRoutes = []
arr.forEach((item) => {
if (item.componentPath === '') {
subRoutes.push({
path: item.menuurl,
name: item.pathname,
meta: { requireAuth: true, menuId: item.menuId }
})
} else {
subRoutes.push({
path: item.menuurl,
name: item.pathname,
meta: { requireAuth: true, menuId: item.menuId },
component: resolve => require(['@/views/' + item.componentpath + ''], resolve)
})
}
// 判断是否有子数组
if (item.menuChilds.length && item.menuChilds.length > 0) {
//如果有子菜单，则再次执行创建路由方法（递归）
subRoutes.push(...createRouterDiGui(item.menuChilds))
}
})
return subRoutes
}
// 执行动态添加路由
function DynamicAddRouter () {
let subRoutes = []
subRoutes = createRouterDiGui(store.getters.getMenuInfo)
router.options.routes[2].children.push(...subRoutes)
console.log(router.options.routes[2].children)
router.options.routes.push(
{
path: '*',
name: '404',
component: (resolve) => require(['@/views/Page404'], resolve)
})
console.log(router.options.routes)
router.$addRoutes(router.options.routes)
}
export default {
DynamicAddRouter: DynamicAddRouter
}
三、main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import dongRouter from './router/dongRouter'
import store from './store'
import Axios from 'axios'
import Echars from 'echarts'
import './plugins/element.js'
Vue.prototype.$axios = Axios
Vue.prototype.$echars = Echars
Vue.config.productionTip = false
// 路由前置守卫（权限判断：判断对应路由是否登录，保证有些组件必须要在登录状态下才能显示）
router.beforeEach(function (to,from,next) {
// 如果用户去登录路由，则直接next
if(to.name === 'Login'){
next()
}else {
// 判断用户是否登录
if(to.meta.requireAuth){
// 如果登录
if(sessionStorage.getItem('isLogin')){
// 如果用户登录且刷新界面了，则重新添加动态路由
if(store.getters.getIsLogin && store.getters.getIsRefresh){
store.dispatch('setNoRefresh') // 改变刷新的状态，设为false，调用setNoRefresh
dongRouter.DynamicAddRouter() // 添加动态路由的方法
next({ ...to, replace: true })
}else {
next()
}
}else {
next({
path: '/Login'
})
}
}else {
if (store.getters.getIsRefresh) {
console.log('加载动态路由')
store.dispatch('setNoRefresh') // 重新刷新设置为false
dongRouter.DynamicAddRouter() // 添加动态路由的方法
next({ ...to, replace: true })
} else {
next()
}
}
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
四、store文件下的index.js（仓库）
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 数据
const state = {
// 判断是否刷新
isRefresh:true,
// 判断是否登录
isLogin:window.sessionStorage.getItem('isLogin') ? Boolean(window.sessionStorage.getItem('menuInfo')) : false,
// 菜单数据
menuInfo:(window.sessionStorage.getItem('menuInfo')) ? JSON.parse(window.sessionStorage.getItem('menuInfo')) : [],
// 用户数据
employeeInfo:(window.sessionStorage.getItem('employeeInfo')) ? JSON.parse(window.sessionStorage.getItem('employeeInfo')) : [],
// token
token:(window.sessionStorage.getItem('token')) ? JSON.parse(window.sessionStorage.getItem('token')) : undefined
}
// 数据获取
const getters = {
getIsRefresh(state){
return state.isRefresh
},
getIsLogin(state){
return state.isLogin
},
getMenuInfo(state){
return state.menuInfo
},
getemployeeInfo(state){
return state.employeeInfo
},
getToken(state){
return state.token
}
}
// 行为，要执行的操作，如果有流程判断、异步请求也写在这里（主要是异步）
const actions = {
setNoRefresh ({ commit }) {
commit('setNoRefresh')
},
loginSuccess ({ commit }, data) {
commit('LoginSuccess', data)
},
LoginExit ({ commit }) {
commit('LoginExit')
}
}
// 处理状态的改变
const mutations = {
// 设置不刷新
setNoRefresh(state){
state.isRefresh = false
},
// 登录成功
LoginSuccess(state,data){
state.isLogin = true;
state.menuInfo = data.data[0].menuInfo;
state.employeeInfo = data.data[0].employeeInfo;
state.token = data.token;
window.sessionStorage.setItem('isLogin',true);
window.sessionStorage.setItem('menuInfo',JSON.stringify(data.data[0].menuInfo));
window.sessionStorage.setItem('token',JSON.stringify(data.token));
window.sessionStorage.setItem('employeeInfo',JSON.stringify(data.data[0].employeeInfo));
},
// 退出登录
LoginExit(){
state.isLogin = false;
state.menuInfo = [];
state.employeeInfo = [];
state.token = undefined;
window.sessionStorage.setItem('isLogin',false);
window.sessionStorage.removeItem('menuInfo');
window.sessionStorage.removeItem('employeeInfo');
window.sessionStorage.setItem('token',undefined);
}
}
const store = new Vuex.Store({
state,
getters,
actions,
mutations,
modules: {
}
})
export default store
五、登录组件(login.vue)
六、主页框架组件Home.vue中绑定菜单
1、html中
2、script中
七、Menu组件（Menu.vue），结合elementui来的
主页
八、MenuTree组件(MenuTree.vue)，主要用了递归（调用自身组件，重点重点重点，重要的事情说三遍）
{{ menu.menuname }}
{{ menu.menuname }}