关于vue的动态路由

import Vue from 'vue';
import store from '../store';
import VueRouter from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { Session } from '@/utils/storage';
import { PrevLoading } from '@/utils/loading.js';
// 路由里请求了接口
import { Label } from '@/api/api.js'
import { getMenuAdmin, getMenuTest } from '@/api/menu';

// 安装 VueRouter 插件
Vue.use(VueRouter);
// 解决 `element ui` 导航栏重复点菜单报错问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch((err) => err);
};


// ----------------------------------------

// 定义静态路由 
const staticRoutes = [
	{
		path: '/login',
		name: 'login',
		component: () => import('@/views/login/index.vue'),
		// meta: {
		// 	title: '登录',
		// },
	},
	{
		path: '/404',
		name: 'notFound',
		component: () => import('@/views/error/404.vue'),
		// meta: {
		// 	title: 'message.staticRoutes.notFound',
		// },
	},
	{
		path: '/401',
		name: 'noPower',
		component: () => import('@/views/error/401.vue'),
		// meta: {
		// 	title: 'message.staticRoutes.noPower',
		// },

	},



];

// 加载静态路由

const router = new VueRouter({

	routes: staticRoutes,

  })
//=========================================
//这里使用了空数组 想办法将后台给的路由变成，只有路由的数组
var rou = []
const getRoutes = () => {
//这里是因为后台没有给的路由在变成动态路由前 自己先写了，之后应该给后台这里清空
	var children = [
		{
			path: "/personal",
			name: "personal",
			component: () => import('@/views/personal/index.vue'),
		},
		{
			path: "/pmp/pmpList2",
			name: "pmp/pmpList2",
			component: () => import('@/views/menu/pmp/pmpList2.vue'),
		},
		{
			path: "/pmp/pmpList4",
			name: "/pmp/pmpList4",
			component: () => import('@/views/menu/pmp/pmpList4.vue'),
		},
	]
//这里是从缓存和接口获取路由数据
	if (Session.get('rou')) {
		rou = Session.get('rou')
		console.log(rou);
	} else {
		console.log(456);
//这里是接口
		Label().then(async (res) => {
			console.log(res.content.data);
			let arr = []
			let arr2 = []
			res.content.data.map(item => {
				arr.push(item.treeList)
			})
//这里是循环遍历后台给的数据 扒掉一层
			for (let i = 0; i < arr.length; i++) {
				arr[i].map(item => {
					arr2.push(item.url)
				})
			}
			console.log(arr2);
			rou = arr2
//这次遍历把路由拿出来放在一个数组
			rou.map((item, index) => {
				let itemroute = {
					path: item,
					name: item.slice(1),
//这里的component 写法写成别的报错找不到组件
					component: () => import(`@/views/meun${item}.vue`)
				}
				// console.log(itemroute);
				children.push(itemroute)
			})
		}).catch(err=>{
			console.log(err);
		})
	}
	console.log(rou);
	rou.map((item, index) => {
		let itemroute = {
			path: item,
			name: item.slice(1),
			component: () => import(`@/views/menu${item}.vue`)
		}
		// console.log(itemroute);  这里没有得到 说明缓存没有
		children.push(itemroute)
	})
	console.log(children);
	
	
	// 定义动态路由
	const dynamicRoutes = 
//这里的动态路由 有一层
		{
			path: '/',
			name: '/',
			redirect: '/pmp/pmpList1',
			// component:() => import('@/layout/index.vue'),
			component: () => import('@/layout/index.vue'),
			// meta: {
			// 	isKeepAlive: true,
			// },
			children: [{
				path: '/main',
				name: 'main',
				// component: () => import('@/layout/routerView/parent.vue'),
				component: () => import('@/layout/routerView/parent.vue'),
				// meta: {
				// 	title: 'message.staticRoutes.notFound',
				// },
				children: children
			},

			]
		}
		
	
	
	console.log(dynamicRoutes);
	router.addRoute(dynamicRoutes)
}
//这里调用方法//获取和加载动态路由
getRoutes()


//前置路由守卫  这里需要优化
router.beforeEach(async (to, from, next) => {
	//每一次请求的时候 , 判断一下 vuex的内容是否丢失 如果丢了 , 重新调用 GetUserApi 接口
	// vuex是不是丢了 并且 token 是不是存在

	let token = Session.get('token1');
	if (!token && to.path != "/login") {
		//没登录 想访问其他页面 
		next("/login")
	} else if (token && to.path === "/login") {
		next(from)
	}else if (to.matched.length === 0) { // 如果未匹配到路由
		next('/401') 
	  } else{
		next()
	}
	
	  
})




// 创建路由

// 加载 loading 
// PrevLoading.start();

// 重置路由
// export function resetRouter() {
// 	router.matcher = createRouter().matcher;
// }

// 延迟关闭进度条
export function delayNProgressDone(time = 300) {
	setTimeout(() => {
		NProgress.done();
	}, time);
}




// 路由加载后
router.afterEach(() => {
	NProgress.start();
	PrevLoading.done();
	delayNProgressDone();
});

// 导出路由
export default router;