BootstrapVue 的带有延迟加载的 b-nav

Question

我无法解决以下问题：

我有一个 Vue.js 组件，其中需要带有路由的选项卡。我选择了b-nav Tabs style (official docs) 的变体，它工作正常，关于选项卡和路由。
问题：我无法弄清楚如何在myItems 中延迟加载每个item 的选项卡内容，而不是在请求选项卡路由之一时将它们全部加载。

路线如下所示：localhost/items/#tab0、localhost/elements/#tab1 等。

（顺便说一句：b-tabs 已内置延迟加载，但不可路由！无法使用它们：-/）

这是我的组件模板的代码：

<template>
    <div class="tabs">
        <b-nav tabs>
            <b-nav-item
                v-for="(item, index) in myItems"
                :key="item.Id"
                :to="'#tab' + item.Id"
                :active="$route.hash === '#tab' + item.Id || (index === 0 && $route.hash === '')"
            >
                {{ item.name }}
            </b-nav-item>
        </b-nav>

        <div class="tab-content">
            <div
                v-for="(item, index) in myItems"
                :key="item.Id"
                class="tab-pane"
                :class="{ active: $route.hash === '#tab' + item.Id || (index === 0 && $route.hash === '') }"
            >
                <!-- indidivual output here, depending on route | I want to lazy load this -->
            </div>
        </div>
    </div>
</template>

这是我的 TypeScript 代码：

<script lang="ts">
    import { Vue, Component, Prop } from "vue-property-decorator";

    @Component()
    export default class MyItemsTabs extends Vue {
        @Prop() readonly myItems!: Item[] | null;
    }
</script>

编辑： 比如说7个标签，我只需要延迟加载2个，其他的立即加载。

有人有想法吗？在此先感谢:-)

Answer 1

我是这样解决的：

我为标签内容创建了一个组件：

模板：

<div class="tab-content">
  <TabContent
    v-for="(item, index) in myItems"
    class="tab-pane"
    :class="{ active: $route.hash === '#tab' + item.Id || (index === 0 && $route.hash === '') }"
    :key="item.Id"
    :tab-content="item"
  />
</div>

在新的TabContent 组件中，我检查：

模板：

<template>
    <div>
        <!-- no "pre-loading" -->
        <TabContent1
            :v-if="$route.hash === "#tab" + item.Id && item.name === 'tabName1'"
        />

        <!-- no "pre-loading" -->
        <TabContent2
            :v-if="$route.hash === "#tab" + item.Id && item.name === 'tabName2'"
        />

        <!-- loaded immediately -->
        <TabContentDefault v-else />
    </div>
</template>

当然，这是简化的代码。实际上，我使用函数进行检查并使用更多属性。

Answer 2

我在这里看到两个选项：

首先，您可以使用b-tab 并为它们实现路由，使用查询参数可能会对您有所帮助。每次更改一个选项卡时，您都需要使用@change。

其次，您可以实现一个显示输出的组件：

<MyCustomComponent v-for="(item, index) in myItems" :key="item.id" :is="selected_component_name " />

查看vue documentation 了解更多说明。