首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    keepAlive页面缓存以及新页面不刷新问题(activated方法)

    但是有个问题,因为编辑页、注册页等是通过路由跳转,当我们编辑了某条数据,返回列表页时,因为被缓存列表页展示的数据并没有被更新过来,只有刷新下才能更新过来。 重点来了 就几行代码,解决问题。...keepAlive怎么使用自己查询,这里介绍的是使用后如何刷新问题。...所以你页面中需要的刷新都写在这里面就完成了。 你以为这样就结束了吗!!!没有 A页面缓存了,push进入B页面。首次进入B页面数据正常,url也正常。回退到A页面,A页面确实缓存了。...再从列表中选择进入B页面。此时B页面的数据是缓存的,但是url是正常的!!!见了鬼了!...处理方案一: 在B页面也加,进行处理 // 详情页面 activated() { 需要刷新的数据 } 处理方案二: <keep-alive v-if="keepAlive" exclude

    8.1K20

    vue单页 使用keep-alive页面返回不刷新

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!...首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 把这段代码改成如下: <router-view...}, meta: { pageTitle: '主页', keepAlive: true } } 这样设置了之后,主页的状态就会保存,返回键返回到主页时页面不会刷新请求数据了...从主页跳到任何页面,再返回主页都不会刷新页面!这并不是我想要的,我只要从详情页返回列表页时不刷新页面,其他情况下是需要刷新的,那么我就需要定制化处理了。...注意问题: beforeRouterLeave必须写在有配置路由的页面上才有效的,最开始我想写在App.vue页面上,发现根本就不执行的!

    3.5K30

    解决浏览器差异导致从子页面回到父页面,父页面不刷新的问题

    概述:   在做H5混合开发的时候总是会遇到浏览器差异、不兼容导致同样的代码,IOS和Andoird其中之一出现不可预见的问题。   ...我的问题也是如此,我的需求是从父页面跳转子页面,子页面提交后返回父页面,并且父页面刷新。   ...Android的Chrome浏览器对这个需求就很容易支持,因为他每次页面重新显示的时候,都会刷新整个页面。而IOS的Safari浏览器出现了问题,Safari浏览器会读取缓存,不会重新刷新页面。...总体思路是在子页面返回时,告知父页面刷新。并且只在IOS上执行这个操作,否则Android会刷新两遍。   ...它是在页面显示的时候响应,同时支持Chrome和Safari。

    3.7K20

    浏览器后退不刷新页面的解决办法

    在开发微信的H5页面的时候,发现ISO的微信内置浏览器后退不刷新了,然而业务实现需要刷新。...IOS上的微信内置浏览器为了优化用户体验,采用了后退不刷新的策略,也就是A页面打开B页面,B页面后退到A页面的时候,A页面不刷新(连JS都不执行)。...可以理解成A页面打开B页面的时候,A页面被隐藏了,后退的时候只是把A页面显示出来了。 这种情况禁缓存是没有效果的,可以通过监听onpageshow来刷新页面。...代码如下,在A页面的JS中添加 //解决IOS微信webview后退不执行JS的问题 window.onpageshow = function(event) { if (event.persisted...) { window.location.reload(); } }; event.persisted为了查看页面是直接从服务器上载入还是从缓存中读取的。

    4.5K30

    CDN刷新目录不生效?

    案例背景: cdn侧的目录刷新分为如下两种: 选择 “刷新变更资源” 模式,当用户访问匹配目录下资源时,会回源获取资源的 Last-Modify 信息,若与当前缓存资源一致,则直接返回已缓存资源...,若不一致,回源拉取资源并重新缓存; 选择 “刷新全部资源” 时,当用户访问匹配目录下资源时,直接回源拉取新资源返回给用户,并重新缓存新资源。...问题描述: 目录刷新变更资源之后存在某个资源与源站资源不一致。...所以可能存在提交“刷新变更资源”的时候,发现节点上缓存的是源站之前的资源(Last-Modify更新的)。建议针对于这种场景下直接使用url刷新或者刷新全部资源。...可以看到源站上资源Last-Modify为9月24号 image.png 解决方案: 针对这种源站的Last-Modify反而比节点上缓存的资源Last-Modify更旧的情况,推荐使用url刷新或者目录刷新全部资源

    7.6K91

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

    点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。 也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。...触发请求数据有两个条件: 从其他页面(除了详情页)进来列表时,需要请求数据。 从详情页返回到列表页时,如果详情页 meta 属性中的 isRefresh 为 true,也需要重新请求数据。...这时再返回到列表页,页面会重新刷新。 解决方案二 对于需求二其实还有一个更简洁的方案,那就是使用 router-view 的 key 属性。... 首先 keep-alive 让所有页面都缓存,当你不想缓存某个路由页面...例如从列表页进入了详情页,然后在详情页中删除了列表页中的某个选项,此时从详情页退回列表页时就要刷新,我们可以这样跳转: this.

    4.1K40

    页面窗口改变,自动刷新页面

    原生js提供了自动刷新和窗口改变的方法,本次介绍一下窗口改变时候执行自动刷新!本次demo配合一个随机数来观察转化页面的变化! demo实例 <!...window.onresize=function(){ window.location.reload(); rand();//窗口改变执行函数 } rand();//打开页面先进行函数执行...}     方法说明: window.onload这个都知道是待页面元素全部加载完毕后执行...js代码 window.onresize这个是窗口页面改变时候执行,就是窗口大小改变的事件 window.location.reload()刷新当前页面,加上window这个对象,表面对当前可视化窗口刷新...为了方便观察页面是否正确刷新,onsreize事件内执行一个随机数(数学对象),当页面窗口改变,页面随机数发生改变,执行成功!

    4K10

    Pinia 状态持久化:刷新页面数据不丢失的 3 种方案

    大家好,我是腾讯云开发者社区的Front_Yue,本篇文章将带大家深入探讨如何在Vue3项目中使用Pinia实现状态持久化,确保页面刷新后数据不会丢失。...但一个常见问题是:当我们刷新页面时,Pinia的state会重置为初始值,导致用户数据丢失。...比如:登录信息被清空,需要重新登录购物车数据丢失,用户体验差临时配置状态消失,影响业务逻辑因此,状态持久化就显得尤为重要,它可以确保数据在刷新、关闭或重新打开页面时依然存在。...$subscribe,手动将数据写入localStorage或sessionStorage,页面加载时再恢复数据。...通过这些方法,你可以让Vue3应用在刷新页面后依然保持数据完整,提升用户体验。

    3.3K00
    领券