Vue Router模仿本地移动标签和历史记录堆栈

Question

我正在尝试使用Vue Router来模拟带有选项卡的本机移动路由。为澄清起见，by tabs I mean this。

我现在在做什么

现在，我所有的标签页在被点击时都使用$router.push({ name: tab.tab })。我无法使用router-link，因为使用了Ionic，它是ion-button。每个选项卡都有一组子代。这是一个示例，其中 Learn 是具有 Menu 子级的选项卡：

{
  path: '/learn',
  component: () => import('../views/Learn/Learn.vue'),
  children: [
    { path: '', name: 'learn', redirect: {name: 'learn.menu'} },
    {
      path: 'menu',
      name: 'learn.menu',
      component: () => import('../views/Learn/LearnMenu.vue'),
    },
    // etc

所有选项卡的父母看起来几乎一样。 Learn.vue基本上就是这样（省略了一些转换逻辑，等等）：

<transition name="blabla">
  <keep-alive>
    <router-view />
  </keep-alive>
</transition>

这将导致单击选项卡，即 Learn ，在这种情况下，路由器会将我带到 LearnMenu 。我想要的是单击一个选项卡按钮时，它会打开该父项，并且由于我们使用的是保持活动状态，因此状态应与离开该选项卡时的状态相同。

现在，如果我进入 Learn 标签，滚动或更改子级，然后切换到另一个标签并点击浏览器的“后退”按钮，它就是这样做的。但是，相反，我希望这可以通过按钮实现，而不必只是让我退后一步。

替代方法？

可能可以将所有选项卡拆分为不同的路由器。然后有一个<component :is="currentTab" />。然后，当单击选项卡按钮时，只需切换currentTab。但是，这样就无法在以下标签之间进行链接：$router.push({ name: 'anotherTab.bla })。

结论

我可能正在考虑这个完全错误的问题，并且可能已经有一些关于该主题的文章。尽管我什么都没找到，所以我在这里询问。谢谢。

  

我如何模仿每个选项卡都有其自身历史和状态的本地移动路由行为？