一、pc端
pc端一般返回時有返回按鈕,這種情況下,在跳轉到詳情頁時通過query或params將當前tab的name或下標傳過去,在返回時再通過query或params傳回來
data() {
return {
tabActiveName: 'first'
}
},
created() {
// 當前顯示的tab由返回按鈕傳來的值決定
if (this.$route.params.tabActiveName) {
this.tabActiveName = this.$route.params.tabActiveName
}
}
二、移動端
移動端一般返回時沒有返回按鈕,此時無法通過pc的那種方式。可以通過vuex將當前的tab狀態保存,在回到列表頁時獲取到vuex中的name或下標
import { mapState, mapMutations } from 'vuex'
需要注意當前組件中使用的 activeTab 和vuex中的 projectBoostTabsIndex 必須是兩個不同的變量名
data() { return { activeTab: 0 } }, created() { ddNavSetTitle('項目推進') const { projectBoostTabsIndex } = this this.activeTab = projectBoostTabsIndex }, watch: { activeTab(newVal) { this.setProjectBoostTabsIndex(newVal) // 如果不用輔助函數就直接使用commit觸發 this.$store.commit('setProjectBoostTabsIndex', newVal) } }, methods: { ...mapMutations({ setProjectBoostTabsIndex: 'setProjectBoostTabsIndex' }) }, computed: { ...mapState({ projectBoostTabsIndex: state => state.projectBoost.projectBoostTabsIndex }) }
store/projectBoost.js:
const projectBoost = { state: { projectBoostTabsIndex: 0 }, mutations: { setProjectBoostTabsIndex(state, value) { state.projectBoostTabsIndex = value } } } export default projectBoost
store/index.js:
import projectBoost from './modules/projectBoost'
modules: {
projectBoost
}