在Vue当中同时配置多个路由文件的方法案例代码

时间:2022-12-14 编程联盟人气:0

在Vue当中同时配置多个路由文件的方法

在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中配置好直接访问相关地址即可。

加载全部内容