码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-10-12 12:46:36      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:style   pat   func   UNC   rom   文件夹   ons   export   routes   

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

 

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

标签:style   pat   func   UNC   rom   文件夹   ons   export   routes   

原文地址:https://www.cnblogs.com/Mr-Rshare/p/11660783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!