如何使用 go 到 q-tab 使用 url（類星體框架）

Question

我在主頁頂部有三個 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>

每次我訪問主頁時，它總是默認顯示汽車數據。 問題是假設我單擊了自行車選項卡，然后從那里單擊了一個條目，該條目打開了另一個頁面，其中包含有關單擊的自行車的信息，頁面上有一個后退按鈕（在這里我可以放置鏈接，並且它已鏈接到主頁）。 當我單擊后退按鈕時，它會返回主頁，並加載汽車選項卡數據。 但是當我在自行車標簽上時，我希望后退按鈕將我帶到自行車標簽而不是汽車標簽。

在這里，我的問題是有什么方法可以創建指向選項卡的鏈接，這樣當我可以將它放在后退按鈕中時，它就可以 go 返回到我想要的選項卡。

（我不確定我是否說清楚了，如果沒有，如果您有任何建議或疑問，請告訴我）

Answer 1

這樣做的原因是v-model="tab"在創建 Vue 組件時綁定。 每當創建它時，它最初都會設置為默認值 ( car_list )。 當。。。的時候組件被破壞 任何內部 state 都將丟失。 你可以做幾件事：

1. 確保組件沒有被破壞（不確定你的架構是什么樣的）（你可以檢查它在生命周期鈎子被破壞時使用的任何主機組件）

2. 您可以將選項卡屬性移動到 state 管理中，例如 Vuex 或更高的父組件，它們將保留其生命並且不會因遍歷 SPA 而重置。

（如果您仍然希望數據在您的頁面和其他外部頁面之間的頁面加載之間保持不變，您可以考慮將選項卡state 持久保存到本地存儲）

Answer 2

我使用 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的值設置為來自商店 state 的值。 否則，它會將新值（應該是用戶單擊的結果）寫入存儲。