前端vue/js刷新浏览器页面方法-案例

最新推荐文章于 2023-12-06 21:10:57 发布
最新推荐文章于 2023-12-06 21:10:57 发布
阅读量2.7k 收藏 8
点赞数 2
分类专栏： Vue JavaScript 文章标签： router.go location.reload vue javascript 刷新当前页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackieDYH/article/details/115719595
版权
JavaScript 同时被 2 个专栏收录
368 篇文章 55 订阅
订阅专栏
Vue
328 篇文章 80 订阅
订阅专栏

强制刷新当前页面

reload　-- 强迫浏览器刷新当前页面

location.reload([bForceGet])   //重新加载当前文档
bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")

replace  -- 通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL

location.replace(location.href);  //在服务端重新生成
当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。
如果有这种应用： 需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
history.go(0) 
location=location 
location.assign(location) 
document.execCommand('Refresh') 
window.navigate(location) 
document.URL=location.href

this.$router.go(0)

vue中路由方法

location. reload()，this.$router.go(0) 这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好

自动刷新页面

<meta http-equiv="refresh" content="20"> //每隔20秒刷新一次页面

页面自动跳转

<meta http-equiv="refresh" content="20;url="https://jackiehao.blog.csdn.net/"> //隔20秒后跳转到https://jackiehao.blog.csdn.net/页面

关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可

<body onload="opener.location.reload()"> 
开窗时刷新 
<body onUnload="opener.location.reload()"> 
关闭时刷新

另辟蹊径

新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来

空白页supplierAllBack.vue里面的内容

这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用

provide / inject 组合 方式是我试过最实用的，下面用项目截图给大家说明下：首先，要修改下你的app.vue

通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了

isRouterAlive //true or false 来控制

然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行

 

JackieDYH
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端网页技术之 Vue
cgblpx的博客
08-02 5万+
文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符 operator方法 methodsVue解析数据三种data值的写法高级用法：v-命令指令集双向绑定 v-model闪现 v-cloak判断 v-if循环 v-for事件 v-on绑定 v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展：观察者设计模式HBuilde
vue的刷新页面方式
mentalitys的博客
03-17 629
window.location.reload(),是原生JS提供的方法，this.$router.go(0):是vue路由里面的一种方法， 这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入。 控制<router-view></router-view>的显示与否，在全局组件注册一个方法，该方法控制router-view的显示与否，在子组件调用即可 APP.vue页面 <template>
Vue 数据更新而浏览器并未渲染更新
显磊的博客
11-16 763
产生之后的现象 渲染的数据不是期望的值，然而打印数据，数据已经更新，而且只要网页有一次对出 bug 的变量进行一次操作或是刷新网页就会显示正常渲染的数据。 产生原因 需要渲染的变量在赋值的时候经过了 update 阶段渲染，然后再对给与变量的引用变量的值进行修改，因而即使修改了值(复杂数据)并不能引起新的 update。 同时也可以总结出 vue 的响应式数据变化监听的是变量的引用，而不是变...
vue页面刷新的方法和 自动刷新
weixin_45979310的博客
10-11 536
一、浏览器刷新： location.reload(); // 或者 window.location.reload(); 二.、路由刷新 this.$router.go(0); 这两个强制刷新页面，会有白屏闪烁。一般够用，还有通过provide和inject的方式来v-if 路由视图的，使用注入的方式刷新页面 记住别在 created 或 mounted 声明周期中使用，否则会死循环刷新。（自己补习生命周期钩子） 三、自动刷新： 如果一定要在created 或 mounted中，一进入页面就刷新的，那么需
关于前端刷新当前页面的方法总结
Alone_in_的博客
07-02 1万+
js 刷新当前页面 今天想总结一下之前学到的三种刷新方法： reload() 方法; replace() 方法; 页面自动刷新; 一、reload() 方法 reload()方法用于刷新当前文档。 reload() 方法类似于浏览器上的刷新页面按钮。 语法： location.reload(forceGet) 参数 forceGet 类型 Boolean 描述 可选。默认为...
MeterSphere使用js进行浏览器刷新
春天的波菜
02-10 151
前言：在ms进行UI自动化测试过程当中，遇到页面渲染导致数据加载问题，刷新页面就好了，下面是如何设置刷新浏览器。
前端浏览器刷新事件_前端路由原理
weixin_39525933的博客
01-24 1098
对于前端路由应该都很熟悉了，开发过spa应用的应该都用过，只是很少人去查一下前端路由实现的原理。前端路由的实现核心问题有两个，一个是改变url不刷新，另一个是监听url变化。主要靠的就是hash和history两个方式。先看看hash，hash属性是url的锚部分，从#开始的部分，以前很多时候用来页面的锚点导航。hash改变，页面不会刷新。js也提供了hashchange事件用来监听urlhash...
前端刷新页面的方法
十里不故梦
01-17 1万+
前端刷新页面的方法 reload() 方法 reload() 方法用于刷新当前文档，类似于浏览器上的刷新页面按钮 window.location.reload() replace() 方法 replace() 方法可用一个新文档取代当前文档 window.location.replace("http://www.runoob.com") 页面自动刷新 其中5指每隔5秒刷新一次页面 <meta http-equiv="refresh" content="5"> Vue-Router路由跳转
vue-router路由与页面间导航实例解析
11-30
Vue.js的路由管理工具vue-router是构建单页面应用的关键组件，它允许开发者通过定义路径来控制页面间的导航，实现无刷新的页面切换效果。在传统的Web应用中，页面跳转通常涉及服务器请求，而在vue-router驱动的单...
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
drhrht的博客
07-31 6258
但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...
vue系列 —— vue-route详细使用方法
热门推荐
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
2021年web前端开发视频教程零基础自学HTML/VUE/JS全栈项目实战全套课程
DaiMaGe3的博客
03-12 3607
【web前端开发课程介绍】： 随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架，把全栈工程师要掌握的前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合， 致力于培养中高等前端工程师。 为什么选择前端开发？ 1、专业无限制：计算机专业、非计算机专业占比3：4 2、适合零基础：专业、性别不限，没有基础也能学习 3、技术上手快：4个月，快速学习、系统掌握 4、职业生涯
js刷新页面
threelifeadv的博客
03-01 1195
JavaScript为页面的刷新操作提供了多种操作方法： 1、history.go(0) ； 2、location.reload()； 3、location=location ； 4、location.assign(location)； 5、window.navigate(location) ； 6、location.replace(location) ； 7、document.URL=lo...
js在页面刷新或关闭浏览器之前执行方法
ydZ157的博客
02-11 1910
window.onbeforeunload = function() { //dosomething... }
前端vue中如何让界面进行刷新一次，相当于点击左上角刷新按钮一次
qq_920189602的博客
08-04 9245
使用到方法有两种，一个是window.location.reload()方法和路由router.go(0)方法，但是直接在vue界面调用的话会进行刷新死循环，
vue5种方式实现页面“刷新“
lxs19930928的博客
12-04 6748
vue中五种方式实现页面“刷新” 1: 使用window.location.reload() 强制刷新 都会使页面有短暂的空白，体验效果不是特别好 home.vue <button @click="refreshPageHandler">刷新页面</button> methods: { refreshPageHandler() { console.log("点击刷新页面") window.location.reload() // 第一种
前端集中刷新页面方法
郑炜的博客
11-03 999
refresh();刷新 window.location.reload();刷新当前页面 parent.location.reload();刷新父亲对象(用于iframe框架) opener.location.reload();刷新父窗口对象(用于单开窗口) top.location.reload();刷新最顶端对象(用于多开窗口) location.reload();刷新当前窗口(用于单开窗口)
JS强制刷新页面的方法！
Tra_velers的博客
09-19 4131
这是一种最简单的强制刷新页面的方法，它会重新加载当前页面并且重新请求所有资源，包括 JavaScript 文件、CSS 文件、图片等。以上就是强制刷新页面的多种方法及代码示例，根据不同的场景选择不同的方法即可。此方法会在HTML头部添加一个meta标签，实现了强制刷新的效果。这个方法的content属性可以设置页面刷新的时间间隔，单位是秒。此方法会加载一个新页面，并替换当前页面，实现了强制刷新的效果。此方法会在URL中添加一个随机字符串，实现了强制刷新的效果。此方法会跳转到当前页面，实现了强制刷新的效果。
js实现实时刷新(setInterval、WebSocket、EventSource)
最新发布
muzidigbig的博客
12-06 1696
可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历看下面的代码：当结果返回之后再延时触发下一次的请求，这样虽然没办法保证两次请求之间的间隔时间完全一致但是至少可以保证数据返回的节奏是稳定的，看似已经实现了需求但是这么搞我们先不去管他的性能就代码结构也算不上优雅，为了解决这个问题可以让服务端长时间和客户端保持连接进行数据互通h5新增了和 EventSource 用来实现长轮询，下面我们来分析一下这两者的特点以及使用场景。
js 监听浏览器关闭 刷新
06-28
### 回答1： 在Web开发中，经常需要通过JavaScript来监听浏览器关闭和刷新事件。可以使用window对象的beforeunload和unload事件来实现这个功能。 beforeunload事件会在用户要关闭页面时触发，可以用来在用户离开前提示一些消息。可以通过window.onbeforeunload属性来绑定beforeunload事件处理程序。 当用户点击确定按钮时，页面将被关闭，如果用户点击取消按钮，则页面将保持不变。在beforeunload事件处理程序中，可以通过返回一个非空字符串来提示用户需要保存的未完成操作。 unload事件会在页面完全卸载后触发，可以用来清除一些资源，例如定时器和事件监听器等。可以通过window.onunload属性来绑定unload事件处理程序。 需要注意的是，对于浏览器关闭事件，不同的浏览器有不同的支持方式和行为，因此，在实现监听浏览器关闭和刷新事件时，需要进行兼容性测试，以保障其在不同的浏览器中的稳定性和可靠性。 总的来说，通过使用 JavaScript 监听浏览器关闭和刷新，可以处理一些必要的业务逻辑，从而提升用户体验和应用稳定性。 ### 回答2： JavaScript 可以监听浏览器关闭和刷新等事件，以促进更好的用户体验。这些事件通常是用户主动进行的，但也有可能是浏览器崩溃或其他不可预测的情况引发的。 要监听浏览器关闭事件，可以使用 window.onbeforeunload 事件。这个事件将在浏览器窗口将要关闭之前触发。可以将要执行的代码放在这个事件的回调函数中，以便在用户关闭浏览器时执行。 要监听浏览器刷新事件，可以使用 window.onbeforeunload 事件和 window.onload 事件。在页面加载时，window.onload 事件会被触发。然后，如果用户刷新了页面，window.onbeforeunload 事件会在页面重新加载之前被触发。可以使用这些事件来保存当前页面的状态，并在页面重新加载时恢复状态。 要注意的是，浏览器的不同版本和不同设置可能会影响这些事件的行为。有些浏览器可能不允许在 onbeforeunload 事件中弹出警告框或确认框，而有些浏览器则可以。因此，需要谨慎处理这些事件，并确保它们不会对用户造成不必要的干扰或安全风险。 综上所述，JavaScript 监听浏览器关闭和刷新事件可以帮助我们提供更好的用户体验，并确保我们的网站和应用程序在这些情况下仍然能够正常使用。 ### 回答3： JS 监听浏览器关闭或刷新是 Web 开发中比较常见的需求，主要涉及到浏览器事件的监听和处理。比如在某些场景下，当用户关闭浏览器或刷新页面时，需要提醒用户或执行一些特定的操作。 浏览器关闭事件监听： JS 监听浏览器关闭主要通过 `window` 对象提供的 `beforeunload` 事件来实现。`beforeunload` 事件在浏览器卸载页面之前被触发，可以用来防止用户误操作或提醒用户保存数据。 例如，在页面中添加以下 JS 代码，就能监听浏览器关闭事件： ``` window.addEventListener('beforeunload', function(event) { event.preventDefault(); return event.returnValue = '确定离开此页面吗？'; }); ``` 上述代码中，我们使用 `addEventListener` 方法绑定了 `beforeunload` 事件的监听器。在事件回调函数中，我们使用 `event.preventDefault()` 方法来阻止浏览器默认的关闭行为，并返回一个提示用户的字符串，如果用户确认离开页面，才能真正关闭页面。 浏览器刷新事件监听： JS 监听浏览器刷新主要通过 `beforeunload` 和 `unload` 事件组合使用实现。当用户刷新页面时，会先触发 `beforeunload` 事件，然后触发 `unload` 事件。 例如，在页面中添加以下 JS 代码，就能监听浏览器刷新事件： ``` window.addEventListener('beforeunload', function(event) { // Do something before refreshing }); window.addEventListener('unload', function(event) { // Do something after refreshing }); ``` 上述代码中，我们分别使用 `addEventListener` 方法绑定了 `beforeunload` 和 `unload` 事件的监听器，并在事件回调函数中分别执行了特定的操作。 需要注意的是，由于 `beforeunload` 事件可以阻止浏览器关闭或刷新页面，因此在使用它时需要谨慎考虑，以避免影响用户体验和引起安全问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieDYH

谢谢您嘞！我会继续加油地

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值