Vue.js 2 多个路由文件

Question

我想开始在大型应用程序上使用 vue.js。该应用程序将有 50 多个模块，每个模块都有多个组件。

我的计划是在 components 文件夹下创建子文件夹作为模块，每个文件夹包含它的相关组件文件。

我不希望 router/index.js 文件中定义了数百条路由，因为这将难以管理。

在每个模块文件夹中放置一个 routes.js 文件会很好。

这是否可能以及如何或是否有更好的方法。

原文由 PrestonDocks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您绝对可以这样做，但最终您会希望将它们全部导入到一个 routes.js 文件中。

本文通过一种解决方案涵盖您的情况： https ://medium.com/@disjfa/lets-route-a-vue-app-aa9c3f3dbdf8

我考虑实现它的另一种方法是从每个模块导出一个 const 路由，将它们导入顶层 routes.js ，并在 App.vue 中使用该文件。

祝你好运！

原文由 Kyle Holmberg 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以将每组路由放在其自己的文件中，然后导入这些文件并使用扩展运算符合并路由。

这是一个例子：

路由器/index.js

 import moduleRoutes1 from "./path/to/moduleRoutes1"
import moduleRoutes2 from "./path/to/moduleRoutes2"

const router = new Router({
    mode: 'history',
    routes: [
      ...moduleRoutes1,
      ...moduleRoutes2
      //etc.

      //Note '...' here is a "spread operator" and not ellipsis
    ]

路由器/模块Routes1

 let VuePage1 = () => import(/* webpackChunkName: MyChunk */ '@/path/to/VuePage1')
let VuePage2 = () => import(/* webpackChunkName: MyChunk */ '@/path/to/VuePage2')

import moduleRoutes1_1 from "./path/to/moduleRoutes1_1"

export default [
    {
        path: '/some/path/1',
        name: 'pathName1',
        component: VuePage1,
    },
    {
        path: '/some/path/2',
        name: 'pathName2',
        component: VuePage2,
    },
    ...moduleRoutes1_1 //dividing modules further if needed
]

路由器/模块Routes2

 ... //now it's ellipsis
You've got the idea

原文由 vir us 发布，翻译遵循 CC BY-SA 4.0 许可协议