Question

Vue 2.5，vuex3，vue cli 3

我正在尝试在vue中定义路由，我是否必须为每个路径指定组件，比如说我有50个组件，那么我必须为所有这50个组件定义路径，例如路径aaa-组件aaa，路径bbb-组件bbb，路径ccc-组件ccc。所有路径都与组件名称相同，那么我最终得到了一长串的路由定义？

我可以只使用某种通配符来定义路由，因此它可以尝试基于路径自动找到组件，并假设路径名与组件名相同吗？为简单起见，假设我只有1个级别，则所有50个组件都位于组件文件夹中，名称与路径相同。如何避免必须为每条路线进行定义？

Answer 1

您可以通过组件工厂动态获取组件。

例如，这可以是您的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'
},

有关此主题的更多信息：

如何自动将路径映射到组件

1 个答案: