将路由拆分为单独的文件 [英] Splitting routes into separate files

问题描述

我正在开发一个相当大的 Vue 应用程序，现在我必须在 router/index.js 中的一个页面上编写所有路由，并且它已经变得太长而无法喜欢或甚至维持.index.js 页面充满了诸如...

之类的语句

从'../components/This'导入这个从'../components/That'导入那个从 '../components/ThatOther' 导入 ThatOther从 '../components/ThatOtherOne' 导入 ThatOtherOne//等等等等......然后在底部var 路由器 = 新路由器({路线:[{路径:'/这个'，name: '这个',组件:这个},{路径:'/那个'，name: '那个',组件:那个},//等等...这么多行类似和重复"的代码

由于我的应用程序可以分组为模块"，有没有办法将路由拆分为单独的文件(import 语句和路由器条目)，例如 router/this.js,router/that.js...'，然后添加到主路由页面，router/index.js`?

解决方案

在一个单独的文件中:

从'../components/This'导入这个从'../components/That'导入那个从 '../components/ThatOther' 导入 ThatOther从 '../components/ThatOtherOne' 导入 ThatOtherOne导出默认值 [{路径:'/这个'，name: '这个',组件:这个},{路径:'/那个'，name: '那个',组件:那个},]

在您的路由文件中导入外部路由并使用 传播操作者:

从 './externalRoutesOne' 导入 externalRoutesOne从 './externalRoutesTwo' 导入 externalRoutesTwovar 路由器 = 新路由器({路线:[...externalRoutesOne，...externalRoutesTwo]

<块引用>

注意:... 操作符在定义路由时是必需的.

I am developing a Vue app which is quite big, and I now I have to write all the routes on one page in router/index.js and it is already becoming too long to like or even maintain. The index.js page is full of statements like...

import This from '../components/This'
import That from '../components/That'
import ThatOther from '../components/ThatOther'
import ThatOtherOne from '../components/ThatOtherOne'
// and so on and so on...then at the bottom
var router = new Router({                  
routes: [
    {
        path: '/this', 
        name: 'this', 
        component: This
    },
    {
        path: '/that', 
        name: 'that', 
        component: That
    },
// and so on...so many lines of similar and "repetitive" code

Since my app can be grouped into "modules", is there a way to split the routes into separate files (both the import statements and the router entries) in like router/this.js,router/that.js...', then add them to the main route page,router/index.js`?

解决方案

In a seperate file:

import This from '../components/This'
import That from '../components/That'
import ThatOther from '../components/ThatOther'
import ThatOtherOne from '../components/ThatOtherOne'

export default [
  {
        path: '/this', 
        name: 'this', 
        component: This
    },
    {
        path: '/that', 
        name: 'that', 
        component: That
    },
]

in your route file import the external routes and use the spread oeprator:

import externalRoutesOne from './externalRoutesOne'
import externalRoutesTwo from './externalRoutesTwo'
var router = new Router({                  
routes: [
  ...externalRoutesOne,
  ...externalRoutesTwo
]

Note: the ... operator is required when defining them routes.

这篇关于将路由拆分为单独的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！