vue实现页面前进刷新后退不刷新或者前进后退都刷新而某一个页面后退不刷新

vue2.0_在vue中实现页面前进刷新,回退不刷新;即A进入B,B刷新,B进入C,再从C回退到B,B不刷新。 前言   相信大家都知道类于信息填写的界面,有上一步,下一步的操作,就会遇到下一步刷新上一步不刷新的问题。今天我也浅薄的学习了下相关的知识和具体实现方式,接下来直接上代码让大家借鉴参考一下。 一、回退不刷新 首先我们要实现的是回退不刷新,即B进入到C再从C回到B时,B不刷新。在App.vue中使用keep-alive,并根据keepAlive属性来判断是否要缓存组件,true为需要被缓存,false为不需要被缓存: 注意:需要被缓存的组件,要keep-alive包裹起来。 <template> 阅读详情

有时候我们在开发的时候会遇到一个需求:

         我在home页面选择了一个分类跳到about页面的时候根据home页面转过来的分类数据加载一些商品数据,之后选择了一个商品又跳到detail详情页面,这时客户是选错了想返回上一个页面的重新选择,但是about页面重新加载了数据和页面,客户不知道刚才滑动到哪里了,也忘记了选择哪一个商品,得要重新滑到下面,如果这时候我们做一个缓存体验就比较好。如果页面全部用keep-alive那肯定不行,因为客户返回上一个页面选择一个商品的时候再跳到详情页,keep-alive保存的信息是之前选择过的商品,这样就要刷新。

现在我就要实现这样的一个功能:

       页面前进都刷新,而某后退某一个页面不刷新,如:有三个页面home、about、detail,跳转顺序是home->about->detail,从home跳到about刷新,从detail后退回到about不刷新。看下图

 

 

上面两种情况:

第一种:把路由keepAlive全部设为false,

第一种:把路由keepAlive全部设为true

路由:

 App.vue初始化页面

 store.js

 

 或者可以不用store:

home,about,detail页面都是一样的

 

=================================================

    付费解决前端问题:

 

Vue 路由回退页面不刷新?深度剖析及实用解决方案汇总 本文聚焦 Vue 路由跳转回退后页面不刷新问题,深入剖析其产生原因,详细阐述包括监听路由变化、利用多种钩子函数、借助 provide/inject 组合及 Vuex 状态管理等在内的多种实用解决方案,并强调需依项目需求灵活选用,同时注重数据更新时的性能优化,以提升用户体验,助力开发者构建流畅 Vue 应用。 阅读详情

相关推荐

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

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

vue3 如何设置前进刷新,后退不刷新

在组件上添加v-if=“$route.meta.keepAlive”,这样只有被标记为需要缓存的组件才会被缓存。在组件上添加:key=“$route.fullPath”,这样每次路由变化时,组件都会重新渲染。在Vue3中,可以使用组件的v-slot来实现前进刷新,后退不刷新的效果。在路由配置中,为需要缓存的组件添加meta字段,并设置keepAlive为true。在组件上添加v-slot,并指定name为default。

u011004827的博客 2266

无监督低照度增强实战:用ZeroDCE和SCI拯救你的夜间照片(附PyTorch代码)

本文深入探讨了无监督低照度图像增强技术,重点解析了ZeroDCE和SCI两大代表性模型的核心原理与实战应用。通过对比分析两者的技术路径、网络结构及性能特点,并附上详细的PyTorch代码实现,旨在帮助读者掌握无需配对数据即可有效提升夜间照片画质的深度学习解决方案。

git9versioner的博客 489

vue3.0实现前进刷新后退不刷新

1、通过keep-alive缓存组件; 2、组件路由里定义一个变量isKeepAlive来控制组件的缓存; 3、通过路由独享守卫根据条件修改缓存变量,选择性缓存组件。

知行合一,跬步致远 3380

【NAS for PVE _04】安装TrueNAS

前篇说到如何调试 Proxmox VE 8.2 为安装虚拟机做准备,本篇主要讲述如何在 Proxmox VE 上安装 TrueNAS 系统,并开启NFS供其他系统挂载使用官网下载好TrueNAS系统镜像。

村口王师傅。 6144

蓝桥杯单片机省一经验分享1:基础篇.含详细代码与应试技巧

含详细代码、驱动修改与应试技巧

qq_53529450的博客 1万+

js 刷新页面

js 刷新页面window.location.reload(); Javascript刷新页面的几种方法: 复制代码 1 history.go(0) 2 window.location.reload() window.location.reload(true) 3 location=location 4 location.assign(location) 5 document.execCommand(’‘Refresh’’) 6 window.navigate(locat

时光留不住,毕竟东流去 5665

安装升级最新版本postman时遇到“无法定位程序输入点 SetDefaultDllDirectories于动态链接库KERNEL32.dll 上.”的问题

软件版本迭代更新真快,最近升级最新Postman版本时出现以下问题 我就简单纪录下解决办法: 备注:我用的是最新的postman工具包:Postman-win64-7.25.0-Setup.exe,目前是最新 0. 前提是已经到postman官网https://www.postman.com/downloads/下载好软件工具包 1.安装window7系统更新补丁KB2533623,请到微软公司官网https://support.microsoft.com/en-us/help/2...

董广明的博客 1万+

vue页面刷新

vue页面刷新 首先我们都知道vue属于单页面应用,默认境况下是不会触发刷新页面操作的,所以这个时候就需要我们通过事件来触发reload()来达到刷新操作 接下来我就为大家介绍三种刷新页面的方法 1. wiindow.location.reload([bForceGet]) 该方法强迫浏览器刷新当前页面 bForceGet 可选参数,默认为false,从客户端缓存里取当前 true,则以get方式,从服务器端获取最新的页面,相当于页面f5刷新 wiindow.location.replace(URL)

weixin_52767262的博客 1万+

深度学习入门:一文详解BP神经网络

在BP神经网络中,输入层和输出层的节点个数都是确定的,而隐含层节点个数不确定,那么应该设置为多少。实际上,隐含层节点个数的多少对神经网络的性能是有影响的,有一个经验公式可以确定隐含层。上面是对隐含层和输出层之间的权值和输出层的阀值计算调整量,而针对输入层和隐含层和隐含层的阀值调。在BP神经网络中,输入层节点没有阀值。神经网络,神经网络在机器学习中应用比较广泛,比如函数逼近,模式识别,分类,数据压缩,数据。要求输入模式要有足够的随机性,对输入模式的噪声比较敏感,即对于剧烈变化的输入模式,训。

Machine Learning with Tutors 4万+

Kubeflow系统性学习教程:从入门到高级实践

Kubeflow学习教程摘要(150字): Kubeflow是基于Kubernetes的云原生MLOps平台,提供端到端机器学习解决方案。核心功能包括Jupyter Notebooks开发环境、Pipelines工作流编排、分布式训练支持和模型服务部署。教程采用三阶段学习路径:初学者搭建Kind集群体验Notebooks;中级开发自定义Pipeline组件;高级实现企业级应用。通过容器化和K8s CRD深度集成,解决环境一致性、实验跟踪和资源调度等MLOps痛点,相比MLflow/Airflow更适合大规模

自可乐的博客 886

js页面刷新事件 ,Javascript刷新页面的几种方法

1) 10表示间隔10秒刷新一次 2) window.location.reload(true); 如果是你要刷新某一个iframe就把window给换成frame的名字或ID号 3) window.navigate("本页面url"); 4> function abc() { window.location.href="/blog/window.location.href"

wenlyli的专栏 1万+

PX4从放弃到精通(二十七):固定翼姿态控制

固件版本 PX4 1.13.2欢迎交流学习,可加左侧名片。

超维空间科技的博客 6885

页面刷新代码

页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面。 1) 10表示间隔10秒刷新一次 2)  window.location.reload(true);  如果是你要刷新某一个iframe就把window给换成frame的名字或ID号 3)  window.navigate("本页面url");  4> function abc() { win

小武-php之家 1953

YOLOv11改进 | Neck篇 | 双向特征金字塔网络BiFPN助力YOLOv11有效涨点

本文给大家带来的改进机制是BiFPN双向特征金字塔网络,其是一种特征融合层的结构,也就是我们本文改进YOLOv11模型中的Neck部分,它的主要思想是通过多层级的特征金字塔和双向信息传递来提高精度。本文给大家带来的结构可以让大家自行调节网络结构大小,同时能够达到一定的轻量化效果,为什么发BiFPN呢因为它算是YOLO系列改进中的常青树了,大家可以借鉴它的双向特征思想来创新自己的Neck结构本文的BiFPN通过yaml文件配置可以让大家自行调配其结构。

Snu77的博客 9095

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

selenium刷新页面的各种方法

selenium刷新页面的各种方法

qq_36220852的博客 8998

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

页面刷新 方法总结 JSP刷新

页面刷新 方法总结 JSP刷新      1)      10表示间隔10秒刷新一次   2)      window.location.reload(true);      如果是你要刷新某一个iframe就把window给换成frame的名字或ID号   3)      window.navigate("本页面url");      4)   function

chinajobs的专栏 7322

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

JS 刷新页面所有方法

Javascript 刷新页面 window.location.reload();使用window.open()弹出的弹出窗口,刷新父窗口非模态刷新父页面 :window.opener.location.reload()使用window.showDialog弹出的模式窗口模态刷新父页面   :window.dialogArguments.location.reload(); 先来看一个

小北哥哥和北妈 2481

刷新页面

1 //定时刷新页面,当打开播放页面的时候,暂停刷新,也可以在定时任务中加入ajax,实现异步刷新 2 setInterval(function(){ 3   if($('div').hasClass('in') != true && $('i').hasClass('timer') == true){ 4     window.location.reload(...

banguan9284的博客 779

script刷新页面,刷新代码,页面自动刷新代码

 页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面。 1)10表示间隔10秒刷新一次2)window.location.reload(true);如果是你要刷新某一个iframe就把window给换成frame的名字或ID号3)window.navigate("本页面url");4>function abc(){window.loc

liu_zhongjie的专栏 4738

Apicloud——关于页面刷新

项目中有很多需要刷新页面的情况,以达到更新数据的目的; 官方文档中有reload,但是很多时候并不好用; 整理另一种方法: 整体思路是重新加载页面方法,达到刷新 适用于同页面和多个页面之间 举例子: 现在A页面提交数据,相关数据需要在B页面显示,返回页面时(A->B),数据会不更新。 在A页面相关事件处(如点击事件里)写入: 1 api.sendEvent({ ...

weixin_30781433的博客 2142

uniapp刷新页面 H5刷新页面以及app刷新页面

关闭当前页,重新跳转就可以了。

LJJONESEED的博客 3583

页面提示以及页面刷新

页面刷新前先提示后跳转 Response.Write("<script>alter('提交成功!')</script>");Response.Write("<script>window.location.href='MaintainSupplierCompany.aspx'</script>"); 在Load事件里写:(就可以在单击bt...

dcl12753的博客 913

JS刷新页面的方法

js刷新页面的方法 2008-10-26 19:54js刷新页面的方法最近越来越感觉JS的优越性,项目中用到关于框架页面刷新的方法,在网上搜索以后发现有许多不错的代码,但不是很齐全。于是,我索性从网络上搜集以后经过精心编排,整理了一下。^ - ^ 希望大家多多指教!先来看一个简单

风影随悦的专栏 1812

selenium 刷新页面

导航是用于执行各种浏览器操作的界面,如导航到上一页、导航到下一页、刷新页面、关闭浏览器。导航接口的刷新方法不接受任何参数,也不返回任何值。这是Selenium Web驱动提供的执行页面刷新操作的内置方法。该命令刷新命令可以以如下所述的简单方式使用。Get方法可以以递归方式使用来刷新页面。为了实现这一点,我们需要将另一个方法作为参数传递给GET方法。有时我们需要刷新下浏览器,这是我们可以通过下来两个方法来刷新页面。

Jason_WangYing的博客 1万+
上一篇: vue,vue3仿app输入手机验证码功能
下一篇: vue 动态修改h5页面title标签
发奋图强_lee
博客等级 码龄12年 1227粉丝 46原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值