vue路由分区结合require.context使用

Posted 2021-03-26 mr-rshare

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} 
    ]
});