项目中有类似需求：列表进详情，详情再返回列表，列表保持之前的状态，而其他页面进列表则重新渲染。

结合项目实际情况，最终实现方法：结合beforeRouteEnter和beforeRouteLeave钩子然后用keep-alive做缓存。

有关keep-alive的作用及使用方法本文将不再赘述（详见官方文档）

栗子如下，父组件：

<template>
<div id="app">
	<keep-alive :include="cachedPages">
		<router-view />
	</keep-alive>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
	computed: {
		...mapState({
			cachedPages: state => state.cachedPages
		})
	}
}
</script>

列表组件：

export default {
	name: 'listComponentName',
	beforeRouteEnter(to, from, next) {
		next(vm => {
			vm.$store.commit('ADD_CACHED_PAGE', 'listComponentName')
		})
	},
	beforeRouteLeave(to, from, next) {
		// 详情组件路由假如是 /list/detail/123
		if (!to.path.includes('/list/detail/')) {
			this.$store.commit('REMOVE_CACHED_PAGE', 'listComponentName')
		}
		next()
	}
}

vuex：

export default new Vuex.Store({
	state: {
		cachedPages: []
	},
	mutations: {
		ADD_CACHED_PAGE(state, payload) {
			!state.cachedPages.includes(payload) && state.cachedPages.push(payload)
		},
		REMOVE_CACHED_PAGE(state, payload) {
			state.cachedPages = state.cachedPages.filter(item => item !== payload)
		}
	}
})

相关资料

• 一个页面导航库，记录路由并缓存页面，像原生APP导航一样
• 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新
• vue vue-router 完美实现前进刷新，后退不刷新