Javascript 如何使用url转到q选项卡（quasar框架）

我在主页顶部有三个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>

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

这里我的问题是，有没有办法创建一个指向该选项卡的链接，这样当我可以将该链接放在“后退”按钮中时，它就可以返回到我想要的选项卡

---

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

它这样做的原因是因为创建Vue组件时绑定了v-model=“tab”。无论何时创建，它最初都会设置为默认值（汽车列表）。当组件被销毁时，任何内部状态都将丢失。 你可以做几件事：

确保组件未被销毁（不确定您的体系结构是什么样的）（您可以检查生命周期挂钩上正在使用的任何主机组件已销毁）

您可以将选项卡属性移动到状态管理中，例如Vuex或更高级别的父组件，该组件将保留其使用寿命，并且不会因遍历SPA而重置

---

（如果您仍希望在页面与其他外部页面之间的页面加载之间保持数据，您可以考虑将<强> tab > /强>状态存储到本地存储）

，我使用VUEX和观察者

解决了这个问题。

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

如果

选项卡

的旧值为

null

，即首次导航到组件或导航回组件时的值，并且Vuex存储中保存了当前选项卡的值，则会将

选项卡

的值设置为存储状态中的值。否则，它会将新值（应该是用户单击的结果）写入存储