2020-12-30

简单的 Vue 特定文件夹下路由自动加载

---

最简单的vue 路由自动加载！vue-router 需要提前加载好

---

提示：以下是本篇文章正文内容，下面案例可供参考

代码如下（示例）：

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

import home from '../../view/home.vue'; // 默认页面
import notFound from '../../view/notFound.vue'; // 默认404

Vue.use(Router);

let parhArrs = [];
let parhArr = require.context('../../components', true, /.vue/).keys();
let defaultPage = [{
    path: '/',
    name: 'home',
    component: home
}];
let notFoundPage = [{
    path: '*',
    name: 'notFound',
    component: notFound
}]

console.log(parhArr);

for (let i = 0; i < parhArr.length; i++) {
    let item = parhArr[i];
    console.log(item);
    let file_name = item.replace(/(.*\/)*([^.]+).*/ig, '$2');

    console.log(file_name);

    let obj = {
        path: '/' + file_name,
        name: file_name,
        component: () => import('../../components/' + file_name + '.vue')
    }

    parhArrs.push(obj)
}

let routers = defaultPage.concat(parhArrs).concat(notFoundPage)

console.log(routers);

const router = new Router({
    mode: 'history',
    routes: routers
})

export default router

目录结构