Vue 路由文件拆分、合并

场景：由于项目的不断发展，路由文件不断变大，不宜与维护，所以需要对路由文件进行拆分。

• 原来项目路由文件只有一个routes.js，路由配置都放在这个文件中。
• 修改后新增routes文件夹，文件夹下存放各个模块对应的路由文件，然后在统一到routes.js进行路由配置的合并以及路由的一些配置。话不多说，上代码。

routes.js 内容举例如下：

//系统设置模块路由配置
import system_routes from './routes/system.js';
//行业趋势模块路由配置
import industry_routes from './routes/industry.js';
//报表模块路由配置
import report_routes from './routes/report.js';
import VueRouter from 'vue-router';
import Vue from 'vue';

Vue.use(VueRouter);
//路由合并，通过Set方法将多个对象合并成数组
let routes_list = [
    {
        path: '/',
        meta: {
            title: ''
        },
        component: (resolve) => require(['./views/index.vue'], resolve)
    },
    system_routes, industry_routes, report_routes];

// 路由配置
const RouterConfig = {
    mode: 'history',
    routes: routes_list
};
const router = new VueRouter(RouterConfig);

// 路由跳转时的一些配置操作
router.beforeEach((to, from, next) => {
   //pass
    next();
});

//路由跳转后的一些操作
router.afterEach(() => {
    window.scrollTo(0, 0);
});

export default router;

system.js 内容举例如下：

/*
* 系统设置路由配置文件
*
* */
const routers = {
    path: '/system',
    name: 'system',
    component: (resolve) => require(['../views/index.vue'], resolve),//component必须要有指定，并且指定的模版文件中得包含<router-view></router-view>代码
	// 使用 children 属性，实现子路由，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
    children: [
        {
            name: 'group',
            path: 'group',
            component: resolve => void(require(['../views/system/group.vue'], resolve))
        },
        {
            name: 'rule',
            path: 'rule',
            component: resolve => void(require(['../views/system/rule.vue'], resolve))
        },
        {
            name: 'admin',
            path: 'admin',
            component: resolve => void(require(['../views/system/admin.vue'], resolve))
        },
        {
            name: 'profile',
            path: 'profile',
            component: resolve => void(require(['../views/system/profile.vue'], resolve))
        },
        {
            name: 'logslist',
            path: 'logs',
            component: resolve => void(require(['../views/system/logs.vue'], resolve))
        },
        {
            name: 'user',
            path: 'user',
            component: resolve => void(require(['../views/system/user.vue'], resolve))
        }
    ]
};
export default routers;

其他模块路由配置文件类似，最后在routes.js中引入即可。