遇到的问题

在开发过程中,从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();
      },
Logo

前往低代码交流专区

更多推荐