1.配置值store变量值
export default {
namespaced: true,
state: {
tab: ''
},
mutations: {
updateTab (state, tab) {
state.tab = tab
}
}
}
import Vue from 'vue'
import Vuex from 'vuex'
import topic from './modules/topic'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
topic
}
})
export default store
2.设置eventbus
/** * 全局事件观察者 */
import Vue from 'vue';
const Bus = new Vue({
methods: {
emit (event, ...args) {
this.$emit(event, ...args);
},
on (event, callback) {
this.$on(event, callback);
},
off (event, callback) {
this.$off(event, callback);
}
},
data () {
return {
}
},
computed: {
}
});
export default Bus;
3.在main.js全局引入eventbus
import Bus from '@/utils/bus';
Vue.prototype.$bus = Bus // 全局事件管理
4.路由回退前触发event
this.$bus.$emit('selectTabKey', this.tabKey)
this.$router.go(-1)
5.回退后将值先缓存在store里,再修改element tabs默认选中并取出来获取数据
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, i) in tabList" :key="i" :label="item.name" :name="item.key"></el-tab-pane>
<topic-list ref="topicList"></topic-list>
</el-tabs>
this.$bus.$on('selectTabKey', (bkey) => {
if (bkey) {
this.$store.commit('topic/updateTab', bkey)
}
})
this.$nextTick(() => {
this.activeName = this.$store.state.topic.tab || this.activeName
this.$refs.topicList.getData(this.activeName)
})
6.获取数据,完美解决问题
GitHub项目实例:vue-cnode tabs实现方法