将路由拆分为单独的文件

Question

我正在开发一个很大的Vue应用程序，现在我必须将所有路线写在一页上，router/index.js而且它已经变得太长，无法喜欢甚至无法维护。该index.js页面充满了语句，例如...

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

由于我的应用程序可以分组为“模块”，有没有办法将路由拆分为importlike router/this.js，router/that.js...', then add them to the main route page,router / index.js`中的单独文件（语句和路由器条目）？

Answer 1

在单独的文件中：

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
    },
]

在您的路由文件中，导入外部路由并使用传播操作符：

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

注：在...定义它们的路由时，操作者需要。