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: '表单应用'
      }
    },

2. 在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>

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

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

4. 在品牌页修改
   解释：品牌页跳转到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();
      },