VueJS 使用路由查詢渲染動態組件

Question

我正在嘗試根據單擊選項卡產生的路由查詢來呈現不同的組件。 我嘗試了一種動態組件方法，但它僅適用於初始負載。 當我通過單擊更改路由查詢的選項卡進行切換時，它不會更改為其他組件。 以下是我的代碼和文件

顯示.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`
          );
      },
    }
}

下面是上面片段中使用的組件

基礎.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

Answer 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"}`
  }
}

Answer 2

我只是簡單地解決了它。

基礎.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>

我的結構允許我在這個層面上簡單明了