前端刷新页面的五种方法（含原生js、vue和react）

7月前作者：Sjure` 分类：Toy博客阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了前端刷新页面的五种方法（含原生js、vue和react）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原生JS

1、window.history.go(0)方法

window.history.go(0)

2、location.reload()方法

location.reload()

3、location.href=location.href方法

location.href=location.href

vue

4、vue-router方法

const router = useRouter()

router.go(0)

react

5、react-router方法文章来源地址https://www.toymoban.com/news/detail-600871.html

import { createBrowserHistory, createHashHistory } from 'history';

const history = createBrowserHistory() // history模式
const history = createHashHistory() // hash模式

history.go(0)

到了这里，关于前端刷新页面的五种方法（含原生js、vue和react）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vue/react项目刷新页面出现404的原因以及解决办法

问题描述：vue/react项目，正常的页面操作跳转，不会出现404的问题，但是一旦刷新，就会出现404报错。产生原因：我们打开vue/react打包后生成的dist文件夹，可以看到只有一个 index.html 文件及一些静态资源，这个是因为vue/react是单页应用(SPA)，只有一个index.html作为入口文件，

2024年02月06日
浏览(41)
前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案二：轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样

当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。 vue、js、webpack 根据打完包之后生成的 script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮

2024年01月23日
浏览(32)
Vue/React 项目部署到服务器后，刷新页面出现404报错

问题描述：在本地启动项目一切正常，部署到服务器上线后出现BUG，项目刷新页面出现404 。起初以为是自己路由守卫或是token丢失问题，找了一圈终于解决了产生原因：我们打开vue/react打包后生成的dist文件夹，可以看到只有一个 index.html 文件及一些静态资源，这个是因为

2024年02月07日
浏览(37)
微前端：qiankun的五种通信方式

今天盘点一下 qiankun 父子应用的通信方式都有哪些，我发现了 5 种。 1、localStorage/sessionStorage 2、通过路由参数共享 3、官方提供的 props 4、官方提供的 actions 5、使用vuex或redux管理状态，通过shared分享接下来我们一个一个进行说明有人说这个方案必须主应用和子应用是同一个

2024年03月21日
浏览(34)
JS强制刷新页面的方法！

1.使用location.reload()方法：这是一种最简单的强制刷新页面的方法，它会重新加载当前页面并且重新请求所有资源，包括 JavaScript 文件、CSS 文件、图片等。代码示例： 2.使用location.replace()方法：此方法会加载一个新页面，并替换当前页面，实现了强制刷新的效果。代码示例

2024年02月05日
浏览(35)
js刷新页面方法合集分享

本文介绍下，用js刷新当前页面的几种方法，包括reload方法、replace方法、自动刷新方法等。有需要的朋友参考下吧如何实现刷新当前页面呢？借助js你将无所不能。 1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet，可选参数

2024年02月06日
浏览(32)
前端传递对象，后台接收对象的五种方式

前端传递对象，后台接收对象的方式主要有以下几种：使用 @RequestBody 注解：在 Spring Boot 控制器方法中使用 @RequestBody 注解将请求体中的 JSON 数据映射为 Java 对象。使用 @ModelAttribute 注解：在 Spring Boot 控制器方法中使用 @ModelAttribute 注解将 URL 参数或表单数据映射为 Java 对象

2024年02月06日
浏览(35)
前端页面点击刷新-触发vue生命周期加载最新数据

需求背景：layout布局，页面头部通过定时器获取后端消息的伪消息通知功能，在点击消息时获取所有消息总数并且刷新页面，以便触发vue的生命周期重新获取所有消息，消息展示在content中。要触发页面刷新，可以使用vue路由的router.push方法，添加一个动态的query参数，可以

2024年02月21日
浏览(34)
数组求和的五种方法

// 数组求和的方法 let arr = [1,2,3,4,5] // 方法一：递归 function sum(arr){ const len = arr.length; if(len === 0) { return 0; } else if(len === 1){ return arr[0]; } else { return arr[0] + sum(arr.slice(1)); } } // 方法二：循环 function sum(arr) { let s = 0; for(let i=0; iarr.length; i++){ s += arr[i] } return s; } // 方法三：map-reduce

2024年02月10日
浏览(35)
Vue路由跳转的五种方式

路由跳转有两种形式：声明式导航、编程式导航 1. router-link 声明式 prop= :to=“…” 相当与 router.push(…) router-link中链接如果是’ / \\\'开始，就是从根路由开始如果开始不带 ’ / \\\'，则是从当前路由开始例子 2. this.$router.push() 可追溯编程式 router.push(…)//该方法的参数可以是一个

2024年02月05日
浏览(27)