在Vue中重新加载或刷新页面时如何显示正确的嵌套子选项卡

Posted 2023-02-22

【中文标题】在Vue中重新加载或刷新页面时如何显示正确的嵌套子选项卡

【英文标题】：How to show correct nested child tab when page is reloaded or refreshed in Vue

【发布时间】：2020-08-13 06:26:20

【问题描述】：

我正在使用 Vue 中的自定义选项卡组件实现嵌套选项卡视图。当我刷新或重新加载嵌套子选项卡的页面时，没有显示活动选项卡。我的问题是如何在为正确的活动子选项卡刷新/重新加载页面时显示活动的父选项卡。在这里我提供代码以便更好地理解。

https://codesandbox.io/s/morning-leaf-zxlt7?file=/src/components/TabView.vue

为了澄清更多，假设我在这里浏览到操作选项卡下的操作 2

现在，当我刷新页面时，我得到了这个-

我需要点击父标签（操作标签）才能看到活动的子标签（操作2）

请帮我解决这个问题。谢谢。

【参考方案1】：

如果我理解正确，您的目标是在重新加载/刷新页面后保持选定的选项卡处于打开状态。在这种情况下，您需要通过调用localStorage.setItem('key', 'value') 在localStorage 中手动创建新项目来存储该组件的状态，然后使用localStorage.getItem('key', 'value') 在组件的mounted() 生命周期挂钩中获取该值。或者，您可以将 Vuex 与 vuex-persist 插件一起使用，该插件将为您处理保存和加载应用程序的状态。

【讨论】：

实际上，我保持该状态，但嵌套子选项卡正在发生问题。每当我在嵌套子选项卡中刷新时，父选项卡都不会被激活，因此嵌套子选项卡也不会显示。我需要手动单击父选项卡才能看到嵌套的子选项卡。

【参考方案2】：

编辑后，您似乎希望应用在刷新后转到特定路线。也许您可以实现 vue-router，并将最近的路由保存在本地存储中，然后在应用刷新时将用户重新路由到所述最近的路由。

您需要：实现 vue-router 以便将打开的选项卡保存到路由中，使用钩子或 mixin 将最近的路由保存到本地存储，在 App.Vue 中使用 created() 钩子来加载最近的路由（如果有）并使用编程导航将用户推送到加载的最新路线。

【讨论】：

感谢您的回答，我已经编辑了我的问题。你能再看看吗？