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 projectBooststore/index.js：
import projectBoost from './modules/projectBoost'
modules: {
projectBoost
}
文档来源：51CTO技术博客https://blog.51cto.com/u_15301829/3068385
页:
[1]