javascript - Vue怎麼實作任一個tab頁刷新後不回退到第一個tab標籤?
阿神
阿神 2017-05-18 11:02:28
0
3
1429

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

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

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

阿神
阿神

闭关修行中......

全部回覆(3)
漂亮男人

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

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

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

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

phpcn_u1582

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

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

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

洪涛

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板