脚本宝典收集整理的这篇文章主要介绍了vue项目中keep-alive缓存，从详情页返回列表时保存上一步的信息，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

问题由来

1、最近用vue做前端项目，从查询页面进入详情页时，返回页面需要保留上次的查询条件，表格当前页数。
2、从其他菜单进去，不需要缓存，要保持页面的初始状态。
基于上面两种情况，我打算用vue中的keep-alive来缓存页面。

问题的解决方法

• 列表项目

. 用vue的内置组件keep-alive来缓存列表页面，再路由出口渲染组件时配置：

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

• 在路由选项中，配置meta属性，keepAlive为true即为需要缓存，同时设置isBack属性，用来标识页面是否是从详情页面返回的。

{
  name:'borrow',
  path:'/borrow',
  component:borrow,
  meta: {
    keepAlive:true,
    isBack: true,
  },
}

• 通过beforeRouteEnter(to,from,next)，来判断路由是从哪里跳转的，如果是从详情页跳转的，将当前路由对象的meta.isBace设置为true，否则设置为false。（设置在查询页面）

beforeRouteEnter(to, from, next) {
  if (from.path == "/addborrow") {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
},

• 为了在其他页面进入时，更新页面中的列表数据和查询条件，我们将在activated钩子函数中挂在页面初次进入时的请求数据。当进入详情页，需要对该条数据进行修改时，修改成功后返回，应该更新列表。

activated() {
  if (!this.$route.meta.isBack) {
    this.handleClear('queryForm');/*清空查询条件*/
  }else{
    this.$route.meta.isBack = false;
    this.getBorrowList();/*列表重新加载*/
  }
},

参考资料

https://yq.aliyun.com/article...

脚本宝典总结

以上是脚本宝典为你收集整理的vue项目中keep-alive缓存，从详情页返回列表时保存上一步的信息全部内容，希望文章能够帮你解决vue项目中keep-alive缓存，从详情页返回列表时保存上一步的信息所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。