默认加载：
// 测试页面
import HelloWorld from '@/page/testHomePage/home'
import Form from '@/page/testHomePage/form'
import FormSubmit from '@/page/testHomePage/FormSubmit'
import PushRouterPage from '@/page/testHomePage/routerPage'
import Newpage from '@/page/testHomePage/newpage'
import Table from '@/page/testHomePage/table'
使用：
{
path: '/Table',
name: 'Table',
component: Table,
meta: {
title: 'Table',
}
},
vue自带的懒加载模式
在引入vue组件的时候我们可以直接引入组件并使用，但是这样并不能进行懒加载，项目打开的时候，会默认加载所有的页面，这并不是我们需要的，我们可以使用vue自带的懒加载模式：
component: resolve => (require(["@/components/common/Home.vue"], resolve))
这个虽然可以实现按需加载 ，也有一个小缺陷，就是全部模块会打包到一个js中。
使用import引入
{
path: '/',
component: () => import(/* webpackChunkName: 'Home' */ '@/components/common/Home.vue'),
meta: {
title: '自述文件'
},
}
这个使用项目如果报错，那就是我们import的问题
问题原因： import 属于异步引用组件，需要特殊的 babel-loader 处理
我们需要一个加载器：
npm i babel-plugin-syntax-dynamic-import -D
在项目根目录找到.bablerc文件，没有的话新建
{
"plugins": [
"syntax-dynamic-import"
]
}
多余的我没有添加，这个新加的loader直接这样用，改完保存，重启项目就ok。
/* webpackChunkName: ‘Home’ */
这句话的作用是将当前组件打入一个包中，多个webpackChunkName相同将会打入一个包中，避免了将全部组件打入一个js中。
