Vue 实现前进刷新后退不刷新的效果

需求一:

在一个列表页中，第一次进入的时候，请求获取数据。

点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。

也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。

解决方案在 app.vue 设置:

<keep-alive include="list">
<router-view/>
</keep-alive>

假设列表页为 list.vue ,详情页为 detail.vue ,这两个都是子组件。

我们在 keep-alive 添加列表页的名字，缓存列表页。

然后在列表页的 created 函数里添加ajax请求，这样只有第一次进入到列表页的时候才会请求数据，当从列表页跳到详情页，再从详情页回来的时候，列表页就不会刷新。

这样就可以解决问题了。

需求二:

在需求一的基础上，再加一个要求：

可以在详情页中删除对应的列表项，这时返回到列表页时需要刷新重新获取数据。

我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。

{
  path:'/detail',
  name:'detail',
  component:() => import('../view/detail.vue'),
  meta:{ isRefresh:true }
}

这个 meta 属性，可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。 设置完这个属性，还要在 App.vue 文件里设置 watch 一下 $route 属性。

watch:{
  $route(to, from) {
    const fname = from.name
    const tname = to.name
    if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
      // 在这里重新请求数据
      from.meta.isRefresh = false
    }
  }
}

这样就不需要在列表页的 created 函数里用 ajax 来请求数据了，统一放在 App.vue 里来处理。

触发请求数据有两个条件：

  1. 从其他页面（除了详情页）进来列表时，需要请求数据。
  2. 从详情页返回到列表页时，如果详情页 meta 属性中的 isRefresh 为 true ，也需求重新请求数据。

当我们在详情页中删除了对应的列表项时，就可以将详情页 meta 属性中的 isRefresh 设为 true 。这时再返回到列表页，页面会重新刷新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现前进刷新后退不刷新效果

    最近在用vue尝试着做移动端的项目.希望实现前进刷新.后退不刷新的效果.即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载).例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新. 由于 keep-alive 会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面.于是首先想到的方案是在点击界面上返回按钮的时候,调用 this.$destroy(true) 来将界面销毁掉.但是在移动

  • Vue中keep-alive 实现后退不刷新并保持滚动位置

    什么是KeepAlive? 首先,我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive.TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念,不能混为一谈.实际上HTTP的KeepAlive写法是Keep-Alive,跟TCP的KeepAlive写法上也有不同. TCP的keepalive是侧重在保持客户端和服务端的连接,一方会不定期发送心跳包给另一方,当一方端掉的时候,没有断掉的定时发送几次心跳包,如果间隔发送几次,对方都返回的是RST,

  • Vue 实现前进刷新后退不刷新的效果

    需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新. 也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新. 解决方案在 app.vue 设置: <keep-alive include="list"> <router-view/> </keep-alive> 假设列表页为 list.vue ,详情页为 detail.vue ,这两个都是子组件. 我们在

  • vue/react单页应用后退不刷新方案

    vue/react单页应用后退不刷新方案

    目录 引言 为什么麻烦 有坑的社区方案(以vue为例) 目前不错的方案 上效果图 vue中的实现 react中的实现 题外 该方案的优点 缺点 引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pushState/popState/replaceState,通过url中的pathName去匹配路由中定义的组件,加载进来并实例化渲染在项目的出口route

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • javascript中的后退和刷新实现方法

    <input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.Go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input type=button

  • 微信web端后退强制刷新功能的实现代码

    具体代码如下所示: <script> //生成uuid var uuidChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""); function uuid() { var r; var uuid = []; uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"; uuid[14] =

  • vue移动端实现下拉刷新

    vue移动端实现下拉刷新

    看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件 说这个功能之前,大家要先了解一下,要怎么触发滚动条事件. 一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样, 只要满足子元素宽度大于父元素宽度就可以了.(下篇文章会讲怎么实现一个横向滚动条) 接入正题!!! 先来看看怎么剖析这个下拉刷新. 要用到的移动端的三个事件: touchstart(手指按下),touchmove(手指移动),touchend(手指离开) 下拉刷新也就是(touchstart => touchm

  • vue实现页面滚动到底部刷新

    本文实例为大家分享了vue实现页面滚动到底部刷新的具体代码,供大家参考,具体内容如下 h5页面 <script> var app = new Vue({ el: '#app', data: { swiper: null, carousel: [], promotion: [], cates: [], //设置size初始为10 size:10, }, mounted: function () { //定义that用that.size获取size的值 var that=this; getProm

  • vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>

随机推荐