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

Question

My goal is to further reduce code and the most obvious one in my project is to abstract lists. Currently I have a vue single file component called List which includes an async data loader. I've also created a bunch of 'derived' single file components using this List component as root tag element, passing props as needed to load the correct data.

Now, since I've split up my components into separate files using this plugin it is common to have a folder structure which looks like this:

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

As you can see, 4 files per component. Imagine having 10 different list components all using List as their base. That is 10 folders with a total of 40 files. And for what? Pretty much the same code, 2-3 values that change (the properties), the rest stays the same.

I've been trying to adjust List so that I can create an instance of it and pass the properties as constructor values. Why? Instead of having 1 folder with 4 files per list, I could just have the base List and the create the components like so:

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

I want to use these objects in the vue-router like so:

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

Anything I tried failed. What have I tried so far?

export default { ... } exports a default single file component. I figured if this is a component, I might as well just override some values in it.

How did I try to do this?

I tried using Object.assign({ ... }, List) in the hope of creating a List object which has the properties defined like I want them to be. I also tried using the vue built in "extends" option of single files components to extend List , but this doesn't save code at all since I still need to define a template/render method for the component .. which results in those 4 files again. I tried to use Vue.component(..) and Vue.extend(..) , alone and in combination but couldn't succeed.

Anything I tried resulted either in a max stack exceeded exception (recursion gone wrong), vue errors were thrown stating that something doesn't fit or just not displaying anything at all.

Is there a way of doing this?

Answer 1

You could define a prop on the List component to specify the type of list and modify the behavior.

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