Having some trouble wrapping my head around the following issue:
I've created a Vue.js component with tabs that have routes. I opted for a variation of the b-nav Tabs style (official docs) and it's functioning well in terms of tabs and routing.
The challenge lies in figuring out how to lazy load the tab-content for each item in myItems instead of loading all at once when one of the tab routes is requested.
The routes are structured like this: localhost/items/#tab0, localhost/elements/#tab1, and so on.
(By the way, b-tabs support built-in lazy loading but don't support routing! Hence, they can't be utilized :-/)
Here's the template code of my component:
<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 === '') }"
>
<!-- individual output here, depending on route | I want to lazy load this -->
</div>
</div>
</div>
</template>
And here's the TypeScript code:
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component()
export default class MyItemsTabs extends Vue {
@Prop() readonly myItems!: Item[] | null;
}
</script>
UPDATE: Out of 7 tabs, I only need to lazy load 2, while the rest should load immediately.
Any suggestions or ideas on how to achieve this? Appreciate your help in advance :-)