动态组件component与批量注册

看官方手册比谁说的都明白:
https://cn.vuejs.org/v2/guide/components-dynamic-async.html

单用

  {
	  path:"/three",
	  name:"Three",
	  component:()=>import("../views/Three.vue").then(()=>{
		console.log('访问three成功!');
	  },()=>{
		console.log('访问three失败!');
	  }),
  }

批量注册

在config文件下建立views.config.js
用于批量注册路由，然后路由注册文件引入后遍历即可

views.config.js

module.exports = [
	{
		name: '主页',
		id: 'home',
		sub: 
			[{
				name: 'Home',
				componentName: 'Home'
			}
		]
	},
	{
		name: '演示2',
		id: 'about',
		sub: 
			[{
				name: 'About',
				componentName: 'About'
			}
		]
	},
	{
		name: '演示3',
		id: 'three',
		sub: 
			[{
				name: 'Three',
				componentName: 'Three'
			}
		]
	}		
]

router批量注册

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import componentsView from "@/config/views.config.js";// 批量注册文件

Vue.use(VueRouter);
const routes = [];

componentsView.forEach((item)=>{
	item.sub.forEach((sub)=>{
		routes.push({
			path:`/${sub.componentName}`,
			name:sub.componentName,
			component:()=>import(`@/views/${sub.componentName}`)
		})
	})
})

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

本教程基于:vue-cli4x