在單獨的文件中定義路由並在 index.js 中使用它們

Question

我的index.js中有這條路線

import {
    createRouter,
    createWebHistory
}
from '@ionic/vue-router';
import {
    RouteRecordRaw
}
from 'vue-router';

const routes = [{
        path: '',
        redirect: '/tabs'
    }, {
        path: '/tabs',
        component: () => import('../views/tabs/TabRoot.vue'),
        children: [{
                path: '',
                redirect: '/tabs/home'
            }, {
                path: '/tabs/home',
                component: () => import('../views/tabs/Home.vue')
            }, 
        ]
    },


   //Sell
   
    {
        path: '/sell',
        component: () => import('../views/pages/sell/Sell.vue')
    },


    //Categories
    
    {
        path: '/trending',
        component: () => import('../views/pages/Trending.vue')
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

我想在others.js文件中定義以下路由並將其放入其中

{
    path: '/crud_ui_landing_vehicles',
    component: () => import('../views/pages/sell/categories/Vehicles.vue')
},

{
    path: '/crud_ui_landing_properties',
    component: () => import('../views/pages/sell/categories/Properties.vue')
},

導入的路由應該在const routes數組對象中使用。 我如何定義和導入路由文件？

Answer 1

使用擴展運算符

// others.js
export const others = [...]

import { others } from './others.js'
const routes = [
  ...others,
  👆
  {
    path: ...,
    component: ...
  },
  ...
]

Answer 2

只需使用一個單獨的文件，如others.js並在那里定義路由

const routes = ....
export default routes;

然后將它們導入到您的文件中

import routes from './others'