0

我在主页顶部有三个 q-tab。比方说汽车，公共汽车，自行车。如果我单击汽车选项卡，它会显示汽车数据，如果单击公共汽车选项卡，它会显示公共汽车数据，如果单击自行车选项卡，它会显示自行车数据而不刷新页面。

<q-tabs v-model="tab" dense align="justify" narrow-indicator>
      <q-tab name="car_list" label="Car list" icon="fas fa-car"></q-tab>
      <q-tab name="bus_list" label="Bus list" icon="fas fa-bus"></q-tab>
      
      <q-tab name="bike_list" label="Bike list" icon="fas fa-motorcycle"></q-tab>
    
    </q-tabs>

每次我访问主页时，它总是默认显示汽车数据。问题是假设我单击了自行车选项卡，然后从那里单击了一个条目，该条目打开了另一个页面，其中包含有关单击的自行车的信息，页面上有一个后退按钮（我可以在这里放置链接，它是链接的到主页）。当我单击后退按钮时，它会返回主页，并加载汽车选项卡数据。但是当我在自行车标签上时，我希望后退按钮将我带到自行车标签而不是汽车标签。

在这里，我的问题是有什么方法可以创建指向选项卡的链接，这样当我可以将它放在后退按钮中时，它就可以返回到我想要的选项卡。

（我不确定我是否说清楚了，如果没有，如果您有任何建议或疑问，请告诉我）

4

2 回答 2

1

这样做的原因是v-model="tab"在创建 Vue 组件时绑定。每当创建它时，它最初都会设置为默认值 ( car_list )。当。。。的时候组件被销毁，任何内部状态都会丢失。你可以做几件事：

  1. 确保组件没有被破坏（不确定你的架构是什么样的）（你可以检查它在生命周期钩子被破坏时使用的任何主机组件）

  2. 您可以将tab属性移动到状态管理中，例如 Vuex 或更高的父组件，它们将保留其生命并且不会因遍历 SPA 而被重置。

（如果您仍然希望数据在您的页面和其他外部页面之间的页面加载之间保持不变，您可以考虑将选项卡状态保持到本地存储）

于 2020-07-27T20:23:43.853 回答
0

我使用 Vuex 和 Watcher 解决了这个问题

watch: {
    tab: function (newValue, oldValue) {
      if (!oldValue && this.$store.state.yourCurrentlySelectedTab) {
        this.tab = this.$store.state.yourCurrentlySelectedTab
      } else {
        this.$store.dispatch('YourActionThatSetsTheCurrentTab', newValue)
      }
    }
  }

如果 的旧值为，tab即null第一次导航到组件或导航回组件时的值，并且 Vuex 存储中保存了当前选项卡的值，它将设置tab值存储状态。否则，它会将新值（应该是用户单击的结果）写入存储。

于 2020-10-28T14:07:34.340 回答