vue使用keep-alive缓存页面，返回页面时刷新部分数据

　作⽤：

　　在vue项⽬中,难免会有列表页⾯或者搜索结果列表页⾯,点击某个结果之后,返回回来时,如果不对结果页⾯进⾏缓存,那么返回列表页⾯的时候会回到初始状态,但是我们想要的结果是返回时这个页⾯还是之前搜索的结果列表,这时候就需要⽤到vue的keep-alive技术了.　介绍：

　　keep-alive 是 Vue 内置的⼀个组件，可以使被包含的组件保留状态，或避免重新渲染。　　实际项⽬中,需要配合vue-router共同使⽤.

　　router-view 也是⼀个组件，如果直接被包在 keep-alive ⾥⾯，所有路径匹配到的视图组件都会被缓存：

⽣命周期执⾏顺序：

　　1、不使⽤keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed

　　2、使⽤keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated　　3、使⽤keep-alive，并且再次进⼊了缓存页⾯的情况：beforeRouteEnter -->activated --> deactivated 路由配置

1、在项⽬下的router⽂件下的index.js进⾏配置

// 路由配置export default [ {

path: '/',

name: 'home',

component: Home, meta: {

keepAlive: true // 需要被缓存 } }, {

path: '/:id', name: 'edit',

component: Edit, meta: {

keepAlive: false // 不需要被缓存 } }

2、App.vue中改为

3、这时凡是被keep-alive包裹住的页⾯都会被缓存，如果想刷新部分内容要启⽤activated函数，⽤法同created，activated只有在被keep-alive包裹时会触发，activated函数⼀进⼊页⾯就触发

⽰例:点击邮寄地址-进⼊地址编辑页⾯-编辑后把数据传给⽗页⾯，并且⽗页⾯不刷新，只是地址更新

地址编辑页⾯

⽗页⾯代码：edit.vue

:name=\"item.name\" :label=\"item.label\"

:placeholder=\"item.label\" :required=item.mandatory

v-model=\"dataList[item.name]\" @click=\"editAddr(item.name)\"/>

地址编辑页⾯：AddressEdit.vue