vue路由分區結合require.context使用

1.先說路由分區

　　在router文件夾下新建你要分區的模塊例如 登陸  訂單模塊

　　新建文件 logn.router.js  order.router.js

　　代碼以下：

export default {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue'),
    children: [
    
    ]
}

　　order.router.js 也是如此

　　而後在 router.js中  引入 login.router.js、order.router.js

　　代碼以下：

import Vue from "vue";
import Router from "vue-router";
import Login from './routers/login.router.js';
import Order from './routers/order.router.js';
import Home from './views/home/home';

Vue.use(Router);

export default new Router({
    routes: [
        { path: '/home', name: 'home', component: Home},
        Login,
        Order    
    ]
});

 

2.結合 require.context使用

　　login.rotuer.js、order.router.js不變

　　在router.js中 修改以下：

import Vue from "vue";
import Router from "vue-router";
import Home from './views/home/home';

Vue.use(Router);

const routerList = [];
function importAll (r) {
    r.keys.forEach(
        key => routerList.push(r(key).default);
    );
}

importAll(require.context('./router', true, /\.router\.js/));
export default new Router({
    routes: [
        { path: '/home', name: 'home', component: Home} 
    ]
});