vue项目 扫描页面模块 自动注册进路由数组

1,935 阅读1分钟

在之前,生成一个页面,要去route路由文件里面添加相应的路由对象,如果是新建的路由模块还要去主index.js引入路由文件一系列操作..

然后现在只需要一个路由index.js文件 ------懒加载的哦!!!!!

import Vue from 'vue'
import Router from 'vue-router'

// 重写原型链push方法防止报错
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
	if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
	return originalPush.call(this, location).catch(err => err)
}

Vue.use(Router)

// 自动抓取路由
// 获取views文件夹下面所有的vue文件 
const views = require.context('../views', true, /\/.*\.vue$/)
let generator = []
// 遍历文件名字
views.keys().map(key => {
	// 生成对应的路由对象
	let route = {
		path: key.slice(1, -4).toLowerCase(),
		component: () => import(`../views${key.slice(1)}`) //懒加载的!
	}
	generator.push(route)
})

// 主导航下面的子页面
const routes = [{
		path: '/',
		name: 'free',
		component: () => import('../views/Home.vue')
	},
	...generator,
	{
		path: '*',
		name: 'Error',
		component: () => import('../views/Error.vue')
	}
]

console.log(routes);

const router = new Router({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})

export default router
by 啊不不不不不 (๑→‿ฺ←๑)