javascript - Vue怎麼實作任一個tab頁刷新後不回退到第一個tab標籤？

Question

##像上面的例子，初始時教練頁面，當我點擊訓練場頁面，在瀏覽訓練場頁面時，刷新，但不想跳回到教練那欄，要怎樣實現？

##同理，還有當我選擇篩選條件南山區時，從列表中點擊選擇了一個訓練場查看，但是返回時又想保留在已選擇南山區的狀態裡（而不是一開始的全部區域裡），這要怎麼實現呢？

還有，之前上網查詢了，發現有人提出這種方式：
1.使用vuex記錄狀態
2.將vuex store儲存到localStorage
3.刷新頁面之後讀取localStorage初始化vuex store
想問具體怎麼實作？

Answer 1

你都已經說了上面3點了，去做不就好了。
提供一個想法：
當你從tab1點擊切換到tab2的時候就在本地存一個標記，例如：

sessionStorage.setItem("flag", "1");

此時你在tab2瀏覽器刷新，js判斷本地是否存在flag，如果存在那就tab2啟動；否則就回到tab1。

注意，tab1初始化的時候刪掉本地存的flag。

Answer 2

如一樓所說，在 Vue 實例選項 data 中加入目前標籤指示器

new Vue({
  el: '#app',
  data: {
    currentTab: localStorage.getItem('currentTab') || 0,
    tabItems: [
     // 标签数据
    ]
  },
  methods: {
    // 切换标签事件
    switchTab: function(index) {
        // 相关逻辑 ...
        localStorage.setItem('currentTab', index);
    }
  }
})

大概就這樣子的思路，希望能給樓主參考

Answer 3

把參數寫在路由上也是一種方法