Javascript vue.js/vue router-使用要路由到的道具创建单个文件组件的实例

我的目标是进一步减少代码，在我的项目中最明显的是抽象列表。目前，我有一个名为

List

的vue单文件组件，其中包括一个异步数据加载程序。我还使用这个

List

组件作为根标记元素创建了一组“派生的”单文件组件，根据需要传递道具以加载正确的数据

现在，由于我已使用插件将我的组件拆分为单独的文件，因此通常会有如下文件夹结构：

\components\
\components\List\
\components\List\List.vue
\components\List\List.vue.js
\components\List\List.scoped.vue.css
\components\List\List.vue.html

如您所见，每个组件有4个文件。想象一下，10个不同的列表组件都使用

list

作为它们的基础。这是10个文件夹，共有40个文件。为什么呢？几乎相同的代码，2-3个值发生变化（属性），其余保持不变

我一直在尝试调整

列表

，以便创建它的实例并将属性作为构造函数值传递。为什么？我不需要一个文件夹，每个列表有4个文件，我只需要基本的

列表

，然后像这样创建组件：

let FooList = new List('foo', true, {}, (x) => {});
let BarList = new List('bar', false, {}, (y) => {});

我希望在vue路由器中使用以下对象：

const router = new Router({
  ...
  routes: [
    {
      path: "some/foo,
      component: FooList,
    },{
      path: "any/bar,
      component: BarList,
    },
  ]
});

我尝试过的一切都失败了。 到目前为止我试过什么

导出默认值{…}

导出默认的单个文件组件。我想如果这是一个组件，我也可以覆盖其中的一些值

我是怎么做到的

我尝试使用

Object.assign（{…}，List）

，希望创建一个

List

对象，该对象的属性定义与我希望的一样。 我还尝试使用单文件组件的vue内置“扩展”选项来扩展

列表

，但这根本不会保存代码，因为我仍然需要为组件定义模板/渲染方法。。这将再次导致这4个文件。我尝试单独或组合使用

Vue.component（..）

和

Vue.extend（..）

，但没有成功

我尝试的任何操作都会导致max stack Excepended异常（递归出错），引发vue错误，指出某些内容不适合，或者根本不显示任何内容

---

有办法吗？

您可以在

列表

组件上定义

属性

，以指定列表类型并修改行为

let routes = [
  {
    path: '/home',
    name: 'home',
    component: List,
    props: { config: { type: 'Listing', display: 'Tile' } }
  },
]

---

您可以在

List

组件上定义

prop

，以指定列表的类型并修改行为

let routes = [
  {
    path: '/home',
    name: 'home',
    component: List,
    props: { config: { type: 'Listing', display: 'Tile' } }
  },
]

---

哦，你可以直接在路由器中定义道具吗？太可怕了！我会尽快尝试，然后再联系你哦，你可以直接在路由器中定义道具吗？太可怕了！我会尽快试试这个，然后再打给你