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

justjavac 发布于2019-08-23 14:10 / 3409人阅读

摘要：问题由来最近用做前端项目，从查询页面进入详情页时，返回页面需要保留上次的查询条件，表格当前页数。从其他菜单进去，不需要缓存，要保持页面的初始状态。当进入详情页，需要对该条数据进行修改时，修改成功后返回，应该更新列表。

问题由来

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

问题的解决方法

列表项目

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

在路由选项中，配置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...

云服务器 GPU云服务器 js返回上一页 asp 返回上一页返回上一页js代码 php返回到上一页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100210.html

Vue keepAlive 数据缓存工具，实现返回上一个页面浏览的位置；

摘要：需求分析背景数据列表页，滚动加载数据多条数据情况下，点击某一条，进入详细页进行编辑修改，删除操作保存返回上一页在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的解决办法原始的办法在点击详情页的时候，记住浏览位置，传递参数或者存到本需求分析背景：1.数据列表页，滚动加载数据；2.多条数据情况下，点击某一条，进入详细页进行编辑（修改，删除）操作；3.保存返回上一页；在上面的...

everfly 2019-08-26 18:27 评论0 收藏0
vue中keepAlive的使用

摘要：文档在及其更高版本中，和将会在树内的所有嵌套组件中触发。另外，在我们的项目中遇到路由相同但参数不同的情况组件被复用，不更新的问题，官方给出了响应路由参数变化根据参数数据响应前言在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。可以用以下几种方案解决问题...

Anleb 2019-08-23 18:22 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（下）

摘要：用开发仿旅游站项目总结上该说的话，该表明的上篇已经表明了。之后的路由切换不再请求数据是因为组件内容是从内存取了不会再重新创建了，对应的钩子函数不会再执行了。此时，通过新增的生命周期钩子函数以及这个缓存值就实现了我们要的功能了。用Vue开发仿旅游站webapp项目总结（上）该说的话，该表明的上篇已经表明了。谢谢上篇评论区一些同学~ 很鼓励我，不过下下篇估计没了，这篇总结完，下下篇可...

libxd 2019-08-29 17:15 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（下）

摘要：用开发仿旅游站项目总结上该说的话，该表明的上篇已经表明了。之后的路由切换不再请求数据是因为组件内容是从内存取了不会再重新创建了，对应的钩子函数不会再执行了。此时，通过新增的生命周期钩子函数以及这个缓存值就实现了我们要的功能了。用Vue开发仿旅游站webapp项目总结（上）该说的话，该表明的上篇已经表明了。谢谢上篇评论区一些同学~ 很鼓励我，不过下下篇估计没了，这篇总结完，下下篇可...

KavenFan 2019-08-26 12:24 评论0 收藏0