Vue.js Vue路由器模拟本机移动选项卡和历史堆栈

我正在尝试使用Vue路由器模拟本机移动路由和标签。为了澄清

我现在在做什么 现在，我的所有选项卡在单击时都使用

$router.push（{name:tab.tab}）

。我无法使用

路由器链接

，因为使用了它的

离子按钮

。每个选项卡都有一组子项。下面是一个示例，其中Learn是一个具有菜单子项的选项卡：

所有的父母看起来几乎一样。

Learn.vue

基本上就是这样（省略了一些转换逻辑等）：

这导致在单击选项卡时，即在本例中为“学习”，路由器会将我带到“学习”菜单。我想要的是，当您单击选项卡按钮时，它会打开该父级，因为我们使用的是keep alive，所以状态应该与离开该选项卡时相同

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

另一种选择？ 可以将所有选项卡拆分为不同的路由器。然后有一个

。然后，当单击选项卡按钮时，它可以只切换

currentTab

。但是，这样就不可能在如下选项卡之间链接：

$router.push（{name:'anotherTab.bla}）

结论 我可能认为这是完全错误的，可能已经有关于这个主题的文章了。虽然我什么也没找到，所以我在这里问。谢谢

在每个选项卡都有自己的历史和状态的情况下，如何模拟本机移动路由行为

---

必须尝试使用一个父组件，其中包含多个组件（选项卡）和v-shows（因此每个选项卡都保留在dom中，包括其状态）？然后，您可以将查询字符串更改推送到路由器（全部在父组件上），以更新历史记录，但无需重新呈现页面。这听起来有点像我的替代解决方案。但是，你会如何在标签之间进行链接，并解析传入的url，例如：my app.com/some/deep/link？我没有这方面的经验；只要记得在文档中读过它；签出：（因此在父组件的watch方法中更改触发v-show的内容）必须尝试使用一个父组件，其中包含多个组件（选项卡）和v-show（这样每个选项卡都保持在dom中，包括其状态）？然后，您可以将查询字符串更改推送到路由器（全部在父组件上），以更新历史记录，但无需重新呈现页面。这听起来有点像我的替代解决方案。但是，你会如何在标签之间进行链接，并解析传入的url，例如：my app.com/some/deep/link？我没有这方面的经验；只要记得在文档中读过它；签出：（因此在父组件的watch方法中更改触发v-show的内容）

{
  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

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