一般情况下我们的页面路由都是放在一起的，只要启动项目那么这些路由都能够去访问，这个设计的意思就在于，我们把路由分开存放，根据不同的筛选去启动不同的路由模块，其他的路由就不能够访问了，这种设计可以用于项目里有多个种类且他们之间的路由不互通甚至说只能访问自己的路由，这样启动以后每个种类只能访问自己的路由页面，打包以后也是如此，而且把路由模块区分开以后，我们也能加快项目的启动时间，因为路由越多加载的组件就越多项目启动的时间就越久（当然VUE3的项目启动方式本来就很快，具体情况看VUE的帖子）。
这里我们是用的VUE2框架搭建的项目，也是通过区分地区去举例。
如果有哪里说的不对的地方希望可以指正出来我们共同进步。
第一步 配置基础的路由
先去创建一个router文件夹，用于存放路由的一些配置。
其中index.js文件是配置路由的。
js
import Vue from "vue"; // 导入vue应用
import VueRouter from "vue-router"; // 导入vue-router
Vue.use(VueRouter); // vue应用使用router插件
const router = new VueRouter({ // 配置router路由信息，里面的routes属性就是路由的信息
routers: []
});
export default router;然后需要配置路由信息，在modeles文件夹里创建不同的js文件，不同的js文件对应不同的模块。
看这两个文件ahRoute.js和ahRoute.js，其中ahRoute.js是启动环境的时候选择安徽模块的时候会用到的路由配置信息，ahRoute.js是启动项目的时候不进行选择直接默认启动的时候所用到的路由信息。
配置完信息以后我们就要去进行启动项目时候进行的模块选择了。
第二步 配置模块的选择
如何在启动项目的时候进行模块的选择呢？其实很简单，Vue Cli有一个概念叫做环境变量，就类似于项目里面声明的变量一样，这里我们用的环境变量是VUE_APP_PROJECT_NAME，根据环境变量VUE_APP_PROJECT_NAME的不同可以启动不同模式的项目，原本默认是只有三种模式：
我们可以给它添加新的模式，去启动对应的模块，添加新模式的方式有有两种。
方式1
在package.json文件里进行配置，原本默认启动项目的命令是npm run serve，然后执行的是vue-cli-service serve，然后我们要添加新的模式，因为这次我们是以地区进行区分举例，前面也创建了安徽的路由信息，所以这次我们就在npm run serve后面加上anhui的后缀，然后在执行里面加上cross-env VUE_APP_PROJECT_NAME=anhui，去修改环境变量VUE_APP_PROJECT_NAME（当然anhui这名字都是自己定义的，可以根据实际情况自己定义），打包build也同样配置。
这个时候如果想启动默认模块的项目，就直接npm run serve，如果想启动安徽模块的项目就npm run serve:anhui去启动安徽模式，当然打包的时候亦是如此。
方式2
除了上面说的在npm run serve后面加上后缀，然后再在执行里面修改环境变量的方式以外还有一种，就是通过mode去修改环境变量。
通过--mode去选择启动的模式，我们在根目录原本默认就会有三个文件：
这三个文件就是前面所说的默认的三种模式，然后环境变量VUE_APP_PROJECT_NAME就是在里面配置的：
当然里面也可以配置一些别的环境变量，比如默认的接口IP路径，名字都是自己取，就像是在项目里声明一个变量一样，这是根据实际情况来的。
现在我们知道了如何去配置模块并且在启动项目的时候如何去选择模块，接下来就要给不同的模块配置上对应的路由信息。
第三步 给不同的模块配置对应的路由信息
在项目的根目录创建router_config.js文件，里面是给不同的模块配置对应的路由信息。
我们可以通过process.env去获取到环境变量，我们前面说的用于区分项目不同模式的VUE_APP_PROJECT_NAME，就可以通过process.env.VUE_APP_PROJECT_NAME去获取到，根据值得不同，去配置不同得路由信息，而路由信息就是从我们第一步创建的/router/module文件夹里面来的，比如下面，如果启动安徽模式的项目，就配置ahRoute.js文件路由信息，如果是默认的，就是allRoute.js文件里面的路由信息，然后再导出去配置信息。
js
let options = {
routes: [], //路由列表
modelName: "", //模块名称
};
if (process.env.VUE_APP_PROJECT_NAME == "anhui") {
options.modelName = "安徽";
options.routes = [...require("@/router/modules/ahRoute.js").default];
} else {
options.modelName = "其他省份"; // 也就是默认启动时候配置的路由信息
options.routes = [...require("@/router/modules/allRoute.js").default];
}
export default options;第四步 将路由数据配置到路由上
前面第一步的时候我们已经配置好基础的路由了，只是还没有给上路由数据。
我们在index.js文件里引入router_config.js文件导出的数据，然后把路由数据配置在路由上就好了。
js
import Vue from "vue";
import VueRouter from "vue-router";
import config from "../../route_config"; // 引入路由数据
Vue.use(VueRouter);
const routes = config.routes; // 这就是路由数据
const router = new VueRouter({
routes, // 配置在路由上
});
export default router;第五步 将路由引入到入口文件
js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");这样就完成了路由分模块的设计了。