VueJS 使用路由查询渲染动态组件答案

【问题标题】：VueJS Render Dynamic Component with route queryVueJS 使用路由查询渲染动态组件
【发布时间】：2020-08-15 03:48:17
【问题描述】：

我正在尝试根据单击选项卡产生的路由查询来呈现不同的组件。我尝试了一种动态组件方法，但它仅适用于初始负载。当我通过单击更改路由查询的选项卡进行切换时，它不会更改为其他组件。以下是我的代码和文件

Show.vue

<div>
    <b-container fluid class="bg-white">
        <b-row class="topTab types" v-if="$refs.chart">
          <b-col
            :class="{ active: currentTab === index }"
            v-for="(tabDisplay, index) in $refs.chart.tabDisplays"
            :key="index"
          >
            <router-link
              :to="{ query: { period: $route.query.period, tab: index } }"
            >
              {{ tabDisplay }}
            </router-link>
          </b-col>
        </b-row>
      </b-container>
      <component v-bind:is="currentExample" ref="chart" />
</div>

export default {
    props: {
      group: String,
      cp: String,
      name: String,
      id: [Number, String]
    },
    computed: {
      currentExample() {
        return () =>
          import(
            `@/components/Trend/example/Charts/${this.group}/${this.id}/Base.vue`
          );
      },
    }
}

下面是sn-p上面用到的组件

Base.vue

<template>
  <component v-bind:is="currentData"> </component>
</template>

<script>
export default {
  data: function() {
    return {
      tabDisplays: {
        1: "example1",
        2: "example2",
        3: "example3",
        4: "example4",
        5: "example5",
        6: "example6"
      }
    };
  },
  computed: {
    currentData() {
      return () =>
        import(
          `@/components/Trend/example/Charts/${this.$route.params.group}/${
            this.$route.params.id
          }/Tab${this.$route.query.tab === "6" ? "6" : "1-5"}.vue`
        );
    }
  }
};
</script>

我希望如果我点击 example6 链接。它会在<component>上显示我的@/components/Trend/example/Charts/${this.group}/${this.id}/Tab6.vue

【问题讨论】：

标签： vue.js

【解决方案1】：

动态组件 :is 期望和标识符不是完全成熟的组件。

您应该在父组件的components 属性下导入组件，然后使用计算属性仅获取标识符。

components: {
    'comp{group}{id}{tab}': () => import(
          `@/components/Trend/example/Charts/{group}/{id}/Tab{tab}.vue`)
}

注意：{group}、{id} 和 {tab} 只是您的实际值的占位符。您需要将它们全部导入。

并使用currentData 仅获取标识符：

computed: {
  currentData() {
   return `comp${this.$route.params.group}${this.$route.params.id}{this.$route.query.tab === "6" ? "6" : "1-5"}`
  }
}

【讨论】：

我只是复制了你的例子就出错了。 This dependency was not found:。另外我不明白为什么我需要更改和导入父属性上的组件。我真的打算使用嵌套的动态组件来动态包含模板

【解决方案2】：

我只是简单地解决了它。

Base.vue

<template>
  <component v-bind:is="currentData"> </component>
</template>

<script>
import Tab from "@/components/Trend/example/Charts/abc/1/Tab1-5.vue";
import Tab6 from "@/components/Trend/example/Charts/abc/1/Tab6.vue";

export default {
  computed: {
    currentData() {
      if (this.$route.query.tab === "6") {
        return Tab6;
      } else {
        return Tab;
      }
    }
  }
};
</script>

我的结构让我在这个层面上变得简单明了

【讨论】：