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合併數組的方式進行實現，導入兩個路由模塊的合併