vue router自动导入，动态导入，异步加载组件

router自动加载组件具体详情 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)


let siteRoutes = [];
function importAll(r) {//r 参数自带两个处理属性一个keys 一个是resolve 这里用的keys 具体看官网APi: context module API
    r.keys().forEach((key) => {
        let path = (key.split('.'))[1];//key 就是带了./的文件名 比如我这里打印出来是./About ./Home ./Test 这样你就懂path 和name为什么这样写
        path.indexOf('Home') > -1 ? path = '/' : '';// home页面会被解析为/home，/ 访问为空白，所以做个判断path转为 / 。
        siteRoutes.push({
            path: path,
            name: path.substring(1),
            component: () => r(key)
        })
    });
}

importAll(require.context('../views/', false, /\.vue$/, 'lazy'));// 第二个参数指是否使用子目录 第四个参数是指是否异步 lazy/sync　
const routes = [
    ...siteRoutes,
]
//importRouter(pages)
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

我的文件结构 我是多站点配置 不用看我外层结构看views文件就可以了

文件结构