как автоматически сопоставить путь к компоненту - PullRequest
Новая
       5

как автоматически сопоставить путь к компоненту

0 голосов
/ 20 ноября 2018

Vue 2.5, vuex3, vue cli 3

Я пытаюсь определить маршруты в vue, мне нужно указать компонент для каждого пути, скажем, у меня есть 50 компонентов, затем я должен определить путьдля всех этих 50 компонентов, например, путь aaa - компонент aaa, путь bbb - компонент bbb, путь ccc - компонент ccc.?со всем путем, совпадающим с именем компонента, тогда я получил длинный список определения маршрута?

Могу ли я просто определить маршрут с каким-то подстановочным знаком, чтобы он мог попытаться автоматически найти компонентна основе пути, если предположить, что путь совпадает с именем компонента?для простоты, если у меня есть только 1 уровень, все 50 компонентов находятся в папке компонентов с именем, совпадающим с путем.как я могу избежать определения каждого маршрута?

1 Ответ

0 голосов
/ 28 ноября 2018

Вы можете динамически получить компонент через фабрику компонентов.

Например, это может быть ваш router.js модуль: 

import Vue from 'vue';
import Router from 'vue-router';
import ViewFactory from '@/ViewFactory';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '**',  // wildcard route
      name: 'view-factory',
      component: ViewFactory
    }
  ]
});

И это ViewFactory: 

<template>
  <div>
    <component :is="component" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Default from '@/components/Default';
import aaa from '@/components/aaa';
import bbb from '@/components/bbb';
import bbb from '@/components/ccc';

export default {

  components: {
    Default,
    aaa,
    bbb,
    ccc
  },

  computed: {
    component () {
      // Get last path part, equals component name
      let component = this.$route.path.split('/').slice(-1);

      // Fallback component
      if (Object.keys(this.$options.components).indexOf(component) === -1) {
        component = 'Default';
      }

      // Return component name
      return component;
    }
  }

}
</script>

Когда меняется this.$route.path и вам необходимо перезагрузить данные, не забудьте посмотреть путь и после этого вызвать метод перезагрузки в ViewFactory: 

watch: {
  // call again the method if the route changes
  '$route': 'load'
},

Подробнее оэта тема:

...