Vue.js 2个路由文件

Question

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

我的计划是在components文件夹下创建子文件夹以充当模块，每个文件夹都包含其相关的组件文件。

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

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

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

Answer 1

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

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

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

祝你好运！

Answer 2

这里是如何组织的：

router / 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 spread operator
    ]

路由器/ moduleRoutes1

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

export default [
    {
        path: '/some/path/1',
        name: 'pathName1',
        component: VuePage1,
    },
    {
        path: '/some/path/2',
        name: 'pathName2',
        component: VuePage2,
    },
]

router / moduleRoutes2

...
You've got the idea