Question

在https://router.vuejs.org/上学习Vue路由器时，nested routes上的部分介绍了如何声明子路由。

但是，表明可能的唯一方法是在单个Router文件中声明所有这些文件。因此，如果我要建立一个由几个独立应用程序组成的较大的应用程序索引，并且我希望这些应用程序中的每一个都具有指向它们使用的任何页面的路由和链接，那么如果强制要求这样做的话，将是不一致且难以维护的这些路由全部在主路由器配置中声明。我想我正在寻找一种更关注点分离的方法。

假设我的一个应用程序是Todo应用程序，其主要组件在TodoApp.vue中定义，那么我希望可以在此Todo应用程序的{ {1}}文件，然后主路由器配置将其导入，并将这些路由视为主要.vue路由的子路由，并假设/todo是Todo应用程序的路径。

例如，这是我的路由器定义的摘录，表明Todo是我的其中一项正在进行子导航的应用程序之一：

/todo

我想知道是否有可能从此声明中删除const router = new Router({ base: process.env.BASE_URL, routes: [ { path: '/todo', name: 'TodoApp', component: Todo children: [{ path: 'create-task', component: TodoCreateTask, },{ path: 'edit-tasks', component: TodoEditTask, },{ path: 'create-task', component: TodoCreateTask, }] ] });部分，将其移至children组件文件中，然后在此处进行某种导入吗？

Answer 1

您可以简单地将子路由作为常规数组存储在单独的文件中，例如：

subroutes.js

// import the components that are being referenced

export default [{
  path: 'create-task',
  component: TodoCreateTask,
},{
  path: 'edit-tasks',
  component: TodoEditTask,
},{
  path: 'create-task',
  component: TodoCreateTask,
}]

App.vue

import subroutes from './subroutes';

const router = new Router({
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/todo',
      name: 'TodoApp',
      component: Todo,
      children: subroutes,
    }
  ]
});

我可以将子路径拆分为组件文件吗？

1 个答案: