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
  }