Vue(keep-alive)指定单页返回到页面不刷新，即保存状态

遇到的问题

在开发过程中，从form单页跳转到品牌选择页，选择成功后返回到form页，需要保持form页的状态不变，即内容不刷新。
众所周知，我们可以用keep-alive来实现，keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

实现所有页面不刷新

<keep-alive>
<router-view ></router-view>
</keep-alive>

但是这样并不是我所需要的效果，我只需要从品牌页跳转到form页实现不刷新。

实现指定页面返回不刷新

1. 在路由router/index.js里面，在需要被缓存的组件路由设置keepAlive:true

{
path: '/form',
name: 'form',
component: form,
meta:{
keepAlive:true,
title: '表单应用'
}
},

1. 在App.vue把代码修改成如下。
   解释：路由的meta属性的keepAlive属性值为true时页面保存状态，其他情况不保存状态

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

1. 在form.vue修改
   解释：form页跳转到其他页面时，把form页的keepAlive值设置为false

//修改form的keepAlive值为false时，再次进入页面会重新请求数据，即刷新页面
beforeRouteLeave(to,from,next){
from.meta.keepAlive = false;
next();
},

1. 在品牌页修改
   解释：品牌页跳转到form.vue的时候，把form组件的keepAlive值设置为true，缓存form的状态，其他时候还是false

beforeRouteLeave(to,from,next){
if(to.path == "/form"){
to.meta.keepAlive = true;
}else{
to.meta.keepAlive = false;
}
next();
},