问vue.js / vue-router -创建带有要路由到的属性的单个文件组件的实例

EN

我的目标是进一步减少代码，在我的项目中最明显的一个就是抽象列表。目前，我有一个名为List的vue单文件组件，它包含一个异步数据加载器。我还创建了一堆“派生”的单文件组件，使用这个List组件作为根标记元素，根据需要传递道具来加载正确的数据。

现在，因为我已经使用this插件将我的组件分割成单独的文件，所以通常会有一个如下所示的文件夹结构：

\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组件都使用List作为它们的基础。这是10个文件夹，总共40个文件。为了什么呢？几乎相同的代码，2-3个值改变(属性)，其余的保持不变。

我一直在尝试调整List，这样我就可以创建它的一个实例，并将属性作为构造函数值传递。为什么？而不是每个列表有一个文件夹和4个文件，我可以只有基本的List和创建组件，如下所示：

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

我试过的所有方法都失败了。到目前为止，我已经尝试了什么？

export default { ... }导出默认的单个文件组件。我想，如果这是一个组件，我可能只会覆盖其中的一些值。

我是怎么做到这一点的？

我尝试使用Object.assign({ ... }, List)，希望创建一个List对象，它具有我想要的属性定义。我还尝试使用单个文件组件的vue内置“扩展”选项来扩展List，但这根本不会节省代码，因为我仍然需要为组件定义一个模板/呈现方法。这又导致了这4个文件。我试图单独或组合使用Vue.component(..)和Vue.extend(..)，但都不能成功。

我尝试过的任何方法要么导致最大堆栈超出异常(递归出错)，要么抛出vue错误，说明有东西不适合，或者根本不显示任何东西。

有没有办法做到这一点？