vue项目中keep-alive缓存，从详情页返回列表时保留上一步的信息

2023年6月3日 115次阅读 来源: 666888

题目由来

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…

    原文作者：666888
    原文地址: https://segmentfault.com/a/1190000017456786
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞