在单独的文件中定义路由并在 index.js 中使用它们答案

【问题标题】：Defining routes in a separate file and using them inside index.js在单独的文件中定义路由并在 index.js 中使用它们
【发布时间】：2022-12-19 23:52:11
【问题描述】：

我的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数组对象中使用。我如何定义和导入路由文件？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

只需使用一个单独的文件，如 others.js 并在那里定义路由

const routes = ....
export default routes;

然后将它们导入到您的文件中

import routes from './others'

【讨论】：