[JavaScript知识库]vue中router的封装

写vue项目时 新增页面设置路由操作比较繁琐。故此处记录一下简单的路由封装内容

首先在项目里建一个common文件夹（名字随便）用来保存设置文件

?然后在新建的router.js内编辑内容，我们这里就随便设置几页来说明

const routes = [{
//设置主页部分内容
		path: '/',
		name: 'mainpage',
		redirect: '/home/home',
		component: 'mainpage',
//编辑主页的子路由，只需要填写下附件信息即可，meta是用来确定标题的
		children: [{
			meta: {
				title: '首页'
			},
			component: 'home/home'
		}, ]
	},
//非主业子路由写在数组外，和在router的index.js里写法几无二致
	{
		meta: {
			title: '登录'
		},
		component: 'login/index'
	}
]
//------------------------------------------------------------------------------------

/*裁剪路由信息的path内容，
诸如login页这种只有一页的，
页面习惯在login文件夹下只有一个index.vue页面，
故而需要返回路径中文件夹的名称作为路径内容*/
/* 例如：str = login/index */
function getValue(str) {
//从最后一个‘/’处识别文件名
	let index = str.lastIndexOf('/')
	let val = str.substring(index + 1, str.length)
//如果文件名是index，就返回识别上一级路径名
	if (val === 'index') {
		return str.substring(index, 0)
	}
	return str//返回值作为路径名
}

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

function createRoute(arr) {
//遍历路由数组
	for (let i = 0; i < arr.length; i++) {
//判定是否有路由信息，没有则直接return
		if (!arr[i].component) return
//有路由信息，使用写好的裁剪方法，通过填写的组件信息自动设置组件名、路径和组件懒加载信息
		let val = getValue(arr[i].component)
		arr[i].name = arr[i].name || val.replace(/\//g, '_')
		arr[i].path = arr[i].path || `/${val}`
		let componentFun = import(`../src/views/${arr[i].component}.vue`)
		arr[i].component = () => componentFun
//如果路由存在子路由，子路由也使用同样的方法自配置信息
		if (arr[i].children && arr[i].children.length > 0) {
			createRoute(arr[i].children)
		}
	}
}

//-----------------------------------------------------------------------------
//使用方法，返回处理好的路由信息
let getRoutes = function(){
	createRoute(routes)
	return routes
}
//暴露内容（处理好的路由信息）
export default getRoutes()

随后在路由的入口文件内 直接引入使用即可

mport Vue from 'vue'
import VueRouter from 'vue-router'
import routes from '../../common/router.js'
Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

export default router

?

?

?

?