vue项目刷新当前页面的推荐方式

39 篇文章 2 订阅
订阅专栏

在vue项目中,经常会遇到需要刷新当前页面的需求。
因为vue-router判断如果路由没有变化,是不会刷新页面获取数据的。

在这里插入图片描述

方式1:go(0)和reload()
通过location.reload()或是this.$router.go(0)两种强制刷新方式,相当于按F5,会出现瞬间白屏,体验差,不推荐。

推荐方式:定义一个空白路由页面,路由跳转到该空白页后立马跳回当前页,实现路由刷新。

1.在router路由表中定义一个空白路由,

// 强制刷新当前页所用的中间跳转页
   {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
   }

2.写一个空白路由组件

//  views/redirect/index
<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

3.在需要刷新的页面使用

refresh() {
      // 刷新当前路由
      const { fullPath } = this.$route
      this.$router.replace({
        path: '/redirect' + fullPath
      })
    }

这种方式,基本上能够应付绝大多数情况,推荐使用。

vue项目中,新增或编辑后返回列表页,数据不刷新问题
luoteen的博客
03-06 3188
场景: 新增编辑页是列表页的二级路由 在新增或编辑后列表页不刷新相应的数据 在父路由中:加一个@refresh="getKnowledgeList",自定义方法,传到子路由上,其中绑定的方法为获取列表页的数据方法 <template> <router-view v-if="hidden" :key="key" @refresh="getKnowledgeList">&l...
vue项目刷新当前页
qq_34941404的博客
02-06 712
3种方式 第一种: location.reload() this.router.go(0) 这2种方式都可以刷新当前页面,缺点就是相当于按了F5强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好 第二种: 新建一个空白页面,点击确定的时候先跳转到这个空白页,然后再立马跳转回来 //跳转到空白页 this.$router.replace({ path:'', name:'', }) 空白页 <template> </template> <script&.
2024年最新Vue路由跳转的五种方式_vue路由跳转方式,面试官vo
2401_84447328的博客
05-15 1426
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。所以看完之后,还是多多行动起来吧!可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】可追溯编程式。
Vue实现当前页刷新的方法总结
最新发布
m0_62626838的博客
07-29 522
当组件的 key 属性发生改变时,Vue 会视为这是一个新的组件,而不是复用之前的组件。这样就会触发组件的重新渲染,从而实现页面刷新。1、使用 location.reload() 方法进行页面刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。(不推荐,会有瞬间空白闪动)4、至于该方法调用的时机在你需要的时候去调用即可,针对大屏可视化页面卡死问题可考虑写到websocket的onmessage方法里面。3、在组件中,通过设置组件的 key 属性来触发组件的重新渲染,从而实现页面刷新
vue 刷新当前页面的方式
qq_45327886的博客
11-04 4312
vue 刷新当前页面的方式
vue项目如何刷新当前页
Umbrella_Um的博客
04-29 393
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 用 vue-router 重新路由到当前页面,页面是不进行刷新的 采用 window.location.reload() ,或者 router.go(0) 刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。 App.vue: 声明
vue手动刷新视图以及其他小问题
weixin_43955724的博客
03-30 1962
最近把手头上一个使用angularJS+jquery各种七七八八组件写的页面vue+elementUI重写了一边, 真是极度丝滑, 记录一些vue和elementUI的小问题 1.如果vue中的数据结构比较庞大的话, 十分有可能会出现model更新而视图不更新/model和视图都不更新也不报错的情况, 此时需要手动刷新vue的数据, 在change或click事件中, 使用this.$force...
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中,刷新当前页面是非常常见的需求,例如在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
vue项目刷新当前页面的三种方法
10-17
通常,当用户进行一些操作(如删除、增加记录、表单提交等)之后,开发者需要让当前页面重新加载以显示最新状态,本文将详细介绍在Vue项目中实现页面刷新的三种方法。 首先,传统的刷新页面方式是使用JavaScript...
Vue页面刷新记住页面状态的实现
10-15
Vue开发中,有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态,比如搜索条件、筛选选项等。...通过以上方法,我们可以有效地在Vue项目中实现在页面刷新后记住和恢复用户的页面状态,提高用户体验。
vue 编辑数据后返回列表页,停留在当前页码,并刷新数据
qq_35867245的博客
04-24 3111
1.停留在当前页码 在项目的入口文件(我这里是App.vue)添加<keep-alive></keep-alive>标签开启缓存, 代码如下: <template> <div id="app"> <transition name="fade"> <keep-alive> <router-view v-if=...
Vue刷新页面的四种方法
2301_76510083的博客
03-11 3335
vue刷新页面的四种方法
Vue第 9 篇,Vue页面重置和刷新Vue数据重置)
热门推荐
weixin_65793170的博客
11-24 1万+
⭐一. this.reload()方法(体验度好,无空白页面,相当于页面数据重置))二. 利用vue中的路由方法(偏向于刷新页面)三. 利用window的reload方法(强制刷新
Vue项目刷新里面的组件内容,不要整个页面刷新
weixin_44600235的博客
05-06 730
Header.vue: inject: ['reload'], methods: { //页面刷新 refresh:function(){ this.reload() }, } App.vue: <template> <div id="app"> <router-view v-if="isRouterAlive" ></router-view>...
vue刷新页面如何保证路由不变_vue实现路由不变的情况下,刷新页面操作示例
weixin_39639260的博客
12-20 1499
本文实例讲述了vue实现路由不变的情况下,刷新页面操作。分享给大家供大家参考,具体如下:背景1:在vue写的后台管理项目中,经常会有增、删、改、查的操作,这些操作只是跟用接口跟后台交互下既然用接口交互,那肯定就是axios的异步请求,那么就是说后台数据发生了改变,但是前台的数据并没有实时的更新(每次操作完后台把列表数据重新返给你例外,但是这样的话每次交互的数据量就偏大了)背景2:在使用动态路由配置...
vue 实现当前页刷新的四种方法
qq_44716001的博客
11-02 538
this.$router.go(-1):后退+刷新;this.$router.go(0):刷新;this.$router.go(n) :前进n个页面
vue 页面刷新
weixin_60415789的博客
08-06 192
vue 页面刷新
vue无感刷新
zsj702177的博客
06-08 937
vue无感刷新
vue2+vue-router动态路由添加及路由刷新后消失的解决办法
weixin_44166849的博客
06-06 3896
vue-router动态路由添加及路由刷新后消失的解决办法
vue3项目刷新当前页面的三种方法
09-06
Vue3项目中,刷新当前页面有以下三种常见的方法: 1. 利用window.location.reload方法刷新页面:可以在需要刷新的地方调用window.location.reload()来刷新整个页面。这种方法会重新加载所有的资源,包括HTML、CSS...
写文章

热门文章

  • Vue中实现 将数组转换为树形结构的两种方法 9375
  • vue3+vite assets动态引入图片的几种方式,解决打包后图片路径错误不显示的问题 8059
  • Vue - elementUI 下拉菜单dropdown组件中command方法添加额外参数 6428
  • el-date-picker实现通过其他方式触发日期选择器 5073
  • vue中实现复制el-table中的内容到剪切板 4226

分类专栏

  • Vue 39篇
  • JavaScript 高级篇 5篇
  • vue.js 9篇
  • Echarts 1篇
  • React 2篇
  • JavaScript 基础篇 14篇
  • WebApis 8篇
  • jQuery 3篇
  • AJAX 4篇
  • 数据可视化 2篇
  • Node 4篇

最新评论

  • el-tooltip配合el-button禁用时显示提示

    臧伯克: 给你点赞

  • vue3+vite assets动态引入图片的几种方式,解决打包后图片路径错误不显示的问题

    一只小阿焜: 如果上百万张图片的话,会不会造成一定的损耗呢? 而且你说的是webpack的使用方法,vue3+vite不支持require。 如果有后台的话,考虑是不是将图片转成base64编码更合适?(这点我也不是很清楚)

  • vue3+vite assets动态引入图片的几种方式,解决打包后图片路径错误不显示的问题

    codeBoy_chen: 把需要动态导入的图片放入public文件夹中require返回的时候使用replace('/public', '')将'/public'去掉这样生产环境跟开发环境都能显示了

  • vue3+vite assets动态引入图片的几种方式,解决打包后图片路径错误不显示的问题

    剑宇宝宝的小熊: 哥哥好棒哦表情包

  • Vue中实现 将数组转换为树形结构的两种方法

    从不敲代码: 用第一个会报 landResource.vue:202 Uncaught (in promise) RangeError: Maximum call stack size exceeded at Array.forEach (<anonymous>) at transListDataToTreeData 怎么解决呢

最新文章

  • vue + antd 动态增加表单并进行表单校验
  • 卫星围绕球转
  • 去除生产环境的console
2023年16篇
2022年53篇
2021年29篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值

深圳坪山网站建设公司辛集网站优化多少钱免费网站站长优化金山区企业网站优化哪家好西安专业网站开发优化济南家纺行业网站优化推广可靠吗网站如何做seo优化金山区公司网站优化费用海尔网站关键词优化十堰网站优化哪家公司最好太原网站如何优化网站竞价如何优化寻甸网站优化服务安宁网站优化咨询泊头网站优化去哪学迁西网站优化十堰网站优化电池关键词网站优化哪家价格便宜南头怎么做免费网站优化网站关键词优化排名软件惠水网站优化推广网站的结构优化越秀区网站优化报价网站自然优化排名江苏网站关键词优化价格北仑区网站优化费用网站栏目结构优化企业网站优化公司哪里有百度seo关键词优化网站优化中山网站优化多少钱网站优化外链制作香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化