代码之家 › 专栏 › 技术社区 › Digital Ninja

我可以将子路由拆分为组件文件吗?

vue-router vuejs2 vue.js

Digital Ninja · 技术社区 · 5 年前

在上学习Vue路由器时 https://router.vuejs.org/ ,关于 nested routes 显示如何声明子路由。

但它唯一能证明这一点的方法是在一个路由器文件中声明它们。因此,如果我要建立一个由几个独立的应用程序组成的稍大的应用程序索引,并且我希望每个应用程序都有指向它们使用的任何页面的路由和链接,那么如果强制所有这些路由都在主路由器配置。我想我正在寻找一种更为独立的关注点方法。

假设我的一个应用程序是todo应用程序,其主组件在 TodoApp.vue ,我所希望的是我可以在它的 .vue 文件,然后主路由器配置将其导入,并将这些路由视为主 /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 从这个声明中分离出来,移到 Todo 组件文件,然后在这里进行某种导入?

1 回复 | 直到 5 年前

antonku 5 年前

您只需将子路由作为常规数组存储在单独的文件中,例如:

子程序.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,
}]

应用程序.vue

import subroutes from './subroutes';

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

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前