如何使嵌套的 QRouteTab 保持活动状态（vuejs3 与 Quasar2）

Question

我尝试创建一个带有 2 个嵌套选项卡 (see the screen shot) 的 UI，它使所有访问过的面板保持活动状态。

我这里做了个小例子：https://codesandbox.io/s/no-keep-alive-b7x2sj

然而，只有第二级面板（子选项卡）保持活动状态（我们可以在 TEST I、TEST II 等选项卡之间导航，...无需重新运行设置功能，请参阅控制台输出），但是当我们在第一级标签（父标签）之间导航时，它不再起作用：

[Quasar] Running SPA. 
##### setup -> index 
##### setup -> layout test A 
##### setup -> test i 
##### setup -> test ii 
##### setup -> test iii 
##### setup -> layout test B 
##### setup -> test j 
##### setup -> layout test A 
##### setup -> test i

如您在上面的控制台输出中所见：

“测试 i”的设置是重新运行，当用户在标签“测试 A”中返回时
并且我们不会在“测试 iii”上返回，这是“测试 A”中访问的最后一个面板。

我尝试通过为 index.vue 中的每个父面板（测试 A、B、C、D）添加 <keep-alive> 来修复它，例如：

<q-tab-panel name="testA" class="no-padding">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</q-tab-panel>

但是，它在下面不起作用，我得到了副作用，运行连续两次设置“test j”，正如您在控制台中看到的那样：

[Quasar] Running SPA. 
##### setup -> index 
##### setup -> layout test A 
##### setup -> test i 
##### setup -> test ii 
##### setup -> layout test B 
##### setup -> test j 
##### setup -> test j

您可以在此处找到代码：https://codesandbox.io/s/duplicate-run-of-setup-jjovrb

有没有人能帮我解决这些问题？或者解释为什么它没有像我预期的那样工作。

谢谢，埃里克

Answer 1

如此处所述：

https://github.com/quasarframework/quasar/discussions/12604#discussioncomment-2255160

解决方案是不将 QTabPanel 与 QRouteTab 一起使用。

您可以在此处找到解决方案的示例：https://codesandbox.io/s/without-qtabpanel-m43nec

但是，仍然存在一个错误，运行在子路由中设置函数两次。

[Quasar] Running SPA. 
##### setup -> index 
##### setup -> layout test A 
##### setup -> test i 
##### setup -> layout test B 
##### setup -> test j 
##### setup -> test j 
##### setup -> test C

这似乎与 vuejs 路由器的一个已知问题有关： https://github.com/vuejs/router/issues/626

如何使嵌套的 QRouteTab 保持活动状态（vuejs3 与 Quasar2）

How to keep-alive nested QRouteTab (vuejs3 with Quasar2)

vue.js

tabs

vue-router

quasar-framework

keep-alive