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

我在这里看到两个选项：

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

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

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

查看 vue documentation 以获得更多解释。

Answer 2

我是这样解决的：

我为选项卡内容创建了一个组件：

模板：

<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>

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

BootstrapVue 的 b-nav 延迟加载

BootstrapVue's b-nav with lazy loading

tabs

lazy-loading

typescript

vue.js

bootstrap-vue