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

 

posted @ 2019-10-12 12:12  Mr_R  阅读(1486)  评论(0编辑  收藏  举报