##像上面的例子,初始時(shí)教練頁面,當(dāng)我點(diǎn)擊訓(xùn)練場(chǎng)頁面,在瀏覽訓(xùn)練場(chǎng)頁面時(shí),刷新,但不想跳回到教練那欄,要怎樣實(shí)現(xiàn)?
##同理,還有當(dāng)我選擇篩選條件南山區(qū)時(shí),從列表中點(diǎn)擊選擇了一個(gè)訓(xùn)練場(chǎng)查看,但是返回時(shí)又想保留在已選擇南山區(qū)的狀態(tài)裡(而不是一開始的全部區(qū)域裡),這要怎麼實(shí)現(xiàn)呢?
還有,之前上網(wǎng)查詢了,發(fā)現(xiàn)有人提出這種方式:
1.使用vuex記錄狀態(tài)
2.將vuex store儲(chǔ)存到localStorage
3.刷新頁面之後讀取localStorage初始化vuex store
想問具體怎麼實(shí)作?
閉關(guān)修行中......
你都已經(jīng)說了上面3點(diǎn)了,去做不就好了。
提供一個(gè)想法:
當(dāng)你從tab1點(diǎn)擊切換到tab2的時(shí)候就在本地存一個(gè)標(biāo)記,例如:
sessionStorage.setItem("flag", "1");
此時(shí)你在tab2瀏覽器刷新,js判斷本地是否存在flag,如果存在那就tab2啟動(dòng);否則就回到tab1。
注意,tab1初始化的時(shí)候刪掉本地存的flag。
如一樓所說,在 Vue 實(shí)例選項(xiàng) data 中加入目前標(biāo)籤指示器
new Vue({
el: '#app',
data: {
currentTab: localStorage.getItem('currentTab') || 0,
tabItems: [
// 標(biāo)簽數(shù)據(jù)
]
},
methods: {
// 切換標(biāo)簽事件
switchTab: function(index) {
// 相關(guān)邏輯 ...
localStorage.setItem('currentTab', index);
}
}
})
大概就這樣子的思路,希望能給樓主參考