vue从详情页回到列表页，停留在之前的tab上

Mike

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