VueJS 3.x：对于选项卡式导航，我如何引用组件而不加载它？ [英] vueJS 3.x: for tabbed navigation, how can I reference component but not load it?

问题描述

版本：

VueJS: 3.x
Bootstrap: 5.x
Chrome: Version 93.0.4577.63 (Official Build) (x86_64)
macOS: Big Sur 11.5.2

我在这里概述的问题与one I raised a few days ago非常相似；有关简短的解释，请参阅我的回答。

我正在通过Bootstrap 5.x样式使用选项卡式导航；一个div是这样的：

    <div class="tab-content mt-5" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <Home/>
      </div>
      <div class="tab-pane fade" id="new-car" role="tabpanel" aria-labelledby="new-car-tab">
        <Car/>
      </div>
      <div class="tab-pane fade" id="scan-barcode" role="tabpanel" aria-labelledby="scan-barcode-tab">
        <ScanBarcode/>
      </div>
      <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
        <About/>
      </div>
    </div>

也就是说，我有如下选项卡：

Home | New Car | Scan Barcode | About

这里的关键点是所有vueJS组件都作为选项卡式导航的一部分呈现到主页。最终结果是我不能使用路由器(即this.$router.push({name: 'Home'}实际上是无操作的)在选项卡之间导航；也就是说，vueJS路由器正确地认为所有组件都已经在页面上，并且不会引发任何类型的页面刷新。此外，使用我的网络摄像头的条形码阅读器会立即打开流视频--即使我可能不在Scan Barcode选项卡上！

问题：我如何设置选项卡式导航(仍然使用Bootstrap 5.x样式)，以便以某种方式延迟加载vueJS组件？即，除非我实际在该选项卡上，否则我不希望加载/挂载组件。

推荐答案

请参阅dynamic components in vueJS上的文档。

我使用<component>解决了这个问题，方法类似于使用一个HTML单选按钮：即在某个时间点上只有一个选项卡(也就是说只有一个组件)处于活动状态。

对问题中列出的代码所做的更改适用于我：

    <div class="tab-content mt-5" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <component :is="getActiveComponentOrNull($options.components.Home.name)"></component>
      </div>
      <div class="tab-pane fade" id="new-car" role="tabpanel" aria-labelledby="new-car-tab">
        <component :is="getActiveComponentOrNull($options.components.Car.name)"></component>
      </div>
      <div class="tab-pane fade" id="scan-barcode" role="tabpanel" aria-labelledby="scan-barcode-tab">
        <component :is="getActiveComponentOrNull($options.components.ScanBarcode.name)"></component>
      </div>
      <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
        <component :is="getActiveComponentOrNull($options.components.About.name)"></component>
      </div>
    </div>

其中$options.components在封闭的组件/视图定义中提供：

export default {
  name: "App",
  components: {
    About, Home, Car, ScanBarcode
  },
  ...
};

和getActiveComponentOrNull是在封闭组件上定义的方法，如下所示：

  methods: {
    getActiveComponentOrNull(name) {
      if (this.currentComponent == null || this.currentComponent.name != name) {
        return null;
      }
      return this.currentComponent.name
    }
  }

在我使用的引导5选项卡中，您需要像这样设置一个@click处理程序：

<button @click="currentComponent=$options.components.Home" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>

这个解决方案对我有效，尽管它有它的缺点。例如，每次单击选项卡时，都会为每个选项卡调用getActiveComponentOrNull方法(在我的例子中调用了四次)。也许有一种聪明的方法可以通过计算/反应变量获得相同的行为。

此外，在此解决方案中，重要的是正确卸载选项卡式组件(例如，如果您对ScanBarcode使用流视频，您希望确保在组件卸载时，它使用的资源--在本例中为Video--正常关闭)。

这篇关于VueJS 3.x：对于选项卡式导航，我如何引用组件而不加载它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！