时间戳

首页 > 解决方案 > BootstrapVue 的带有延迟加载的 b-nav

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

问题描述

我无法解决以下问题：

我有一个 Vue.js 组件，其中需要带有路由的选项卡。我选择了一种b-nav 选项卡样式（官方文档）的变体，关于选项卡和路由，它工作正常。
问题：我不知道如何延迟加载每个选项卡的内容，item而myItems不是在请求选项卡路由之一时将它们全部加载。

路线如下所示：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 个，其他的立即加载。

有人有想法吗？提前致谢 ：-）

标签： typescriptvue.jstabslazy-loadingbootstrap-vue

解决方案

我是这样解决的：

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

模板：

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

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

推荐阅读