Vue 多路由文件的合并

Vue 多路由文件的合并

  1.使用的是ES6 数组的合并方法

let routes = new Set([...routes1, ...homerouters]);
2.两个路由文件，导出的实际上就是一个数组

//route.js文件
export default [
    {
        path: "/login",
        component: (resolve) => require(['../views/login.vue'], resolve)//实现懒加载
    },
    {
        path: "/home",
        component: (resolve) => require(['../views/home.vue'], resolve),
        children: [
            {
                path: '/project',
                component: (resolve) => require(['../views/project.vue'], resolve)
            }, {
                path: '/building',
                component: (resolve) => require(['../views/building.vue'], resolve)
            }, {
                path: '/floor',
                component: (resolve) => require(['../views/floor.vue'], resolve)
            }, {
                path: '/room',
                component: (resolve) => require(['../views/room.vue'], resolve)
            },{
                path: '/device',
                component: (resolve) => require(['../views/menu.vue'], resolve)
            },{
                path: '/collector',
                component: (resolve) => require(['../views/collector.vue'], resolve)
            },
            {
                path: "/model",
                component: (resolve) => require(['../views/model.vue'], resolve)
            }
        ]
    },
]

//homeroutes.js 文件，实际上导出的就是一个数组
export default [
    {
        path: '/',
        component: (resolve) => require(['../views/Index.vue'], resolve)
    },
    {
        path: '/mainhome',
        component: (resolve) => require(['../views/Home.vue'], resolve),
        children: [
            {
                path: '/',
                component: (resolve) => require(['../views/Home.vue'], resolve)
            },
            {
                path: 'tree',
                component: (resolve) => require(['../components/Tree.vue'], resolve)
            },
            {
                path: 'table',
                component: (resolve) => require(['../components/Table.vue'], resolve)
            },
            {
                path: 'electricalmeasurement',
                component: (resolve) => require(['../components/ElectricalMeasurement.vue'], resolve)
            }
        ]
    },
    {
        path: '/table',
        component: (resolve) => require(['../components/Table.vue'], resolve)
    },
    {
        path: "*",
        component: (resolve) => require(['../views/Index.vue'], resolve)
    }, 
]

导入两个路由文件，进行数组合并之后，传入VueRoute实例化的参数中

//是index.js 文件
import Vue from 'vue'
import VueRouter from 'vue-router' //路由
import routes1 from "./Admin/route/route.js"//导入路由文件
import homerouters from "./Home/routers/homerouters.js"//g前端页面路由
Vue.use(VueRouter)
//合并两个路由
let routes = new Set([...routes1, ...homerouters]);
const router = new VueRouter({
    routes,
    mode: 'history'
})

 总结：

1.多路由文件实现，实际上是为了分开管理不同模块的路由文件，便于管理和查找

2.在vue的组件开发中，使用的ES6的语法，所以使用的是ES6合并数组的方式进行实现，导入两个路由模块的合并