场景描述:比如A页面跳到B页面,待从B页面返回,A页面是个列表页(保留请求在第二页状态)
方法一:使用keep-alive
<v-main class="content-spacing">
<nuxt />
<nuxt keep-alive :keep-alive-props="{include: includePageNames}" />
</v-main>
<script>
export default {
computed: {
includePageNames() {
return this.$store.state.keepAliveName
},
},
}
</script>
// 首页跳到A页面,setKeepAliveName将状态置空
goLink(it) {
this.$store.dispatch('setKeepAliveName', []).then(() => {
this.$router.push(this.localePath({name: it.link}))
})
},
// A页面
export default {
name: 'Apage',
activated() {
this.getDataList()
},
methods: {
// A页面跳去B页面
goKeywords(item) {
this.$store.dispatch('setKeepAliveName', ['Apage']).then(() => {
this.$router.push(this.localePath({name: 'raw-talent-keywords-id', params: {id: item.id}}))
})
},
}
}
// vuex状态设置
state --> keepAliveName: [],
mutation --> SET_KEEP_ALIVE_NAME(state, val) {
state.keepAliveName = val
},
action --> setKeepAliveName({commit}, val) {
commit('SET_KEEP_ALIVE_NAME', val)
},