vue從詳情頁回到列表頁,停留在之前的tab上


一、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
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM