在vue的开发中，我们如果页面很多的话就需要配置很多个路由地址，如果都放到一个文件当中的话，未免显着很乱。这个时候我们就会想到将路由配置文件分开，比如在router目录下新建index.js和admin.js，这样的话可以将前后台路由文件分开配置，这样前后台清晰明了。具体方法如下：
在路由配置目录下有两个路由配置文件，如下图：
我的router目录下有两个路由配置文件，一个admin.js，专门用来配置后台路由地址，一个是app.js，用来配置前台路由地址。
【第一步】从配置文件admin.js中的代码为：
const AdminIndex= () => import('../pages/admin/Index.vue') //此处的配置和app.js中的配置一样。
const admin = [
{ //此处的配置和app.js中的配置一样。
path:'/admin_index',
component:AdminIndex
}
];
export default admin;//重点是要在这里导出，不然没效果。直接复制我的代码修改即可。
注意，在admin.js配置文件中不要加入其他的，他只是一个数组而已。不要加入如下代码：
import Vue from 'vue'
import vueRouter from 'vue-router'
import admin from './admin'
此处省了500字,这个这些代码都不要放到admin.js中
const router = new vueRouter({
routes,
mode:'history',
base: process.env.BASE_URL
});
const originalPush = vueRouter.prototype.push
vueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
};【第二步】在app.js配置文件中的代码中将admin.js中的admin导入进来，加入如下代码：
import Vue from 'vue' import vueRouter from 'vue-router' import admin from './admin' //重点是这行代码
接下来在配置的路由地址数组中添加如下一点代码：
import Vue from 'vue' import vueRouter from 'vue-router' import admin from './admin' //重点是这行代码
到此，多文件配置搞定，在admin.js中配置好直接访问相关地址即可。
