js-前端vue强制刷新当前页面(router.go(0) window.location.方法)

ops/2024/10/17 19:46:32/

1.强制刷新当前页面

        在完成某一操作后需要刷新当前整体页面,或者部分模块需要重新渲染数据。强制刷新页面可能会影响用户体验,特别是在需要保持页面状态的情况下。使用强制刷新页面需要谨慎使用。

2.方法

2.1  Vue Router 的 router.go(0) 方法
javascript">methods: {refreshPage() {this.$router.go(0);}
}
2.2 window.location.reload() 方法
javascript">methods: {refreshPage() {window.location.reload();}
}

  强制从服务器重新加载页面,而不是从缓存中加载。

2.3 window.location.href 或 window.location.assign() 方法: 
javascript">methods: {refreshPage() {window.location.href = window.location.href;// 或者// window.location.assign(window.location.href);}
}
2.3.1 window.location.href

   window.location.href 是 JavaScript 中的一个属性,它用于获取或设置当前窗口(通常是浏览器窗口)的 URL(统一资源定位符)。它允许你通过编程方式改变用户当前浏览的页面,或者获取用户当前页面的 URL 信息。

获取当前页面的 URL,直接访问 window.location.href 属性,在控制台输出当前页面的完整 URL。

javascript">console.log(window.location.href);

 设置当前页面的 URL,通过给 window.location.href 赋一个新的 URL 值来将用户重定向到另一个页面。

javascript">window.location.href = "https://www.example.com";

用户重定向到 https://www.example.com。这种重定向是客户端的重定向,意味着浏览器会向用户显示新页面的加载过程。

  • 当使用 window.location.href 设置新 URL 时,如果新 URL 与当前页面的域名不同,可能会触发浏览器的跨域安全策略。

  • 重定向操作是不可逆的,一旦执行,当前页面的 JavaScript 执行环境就会被销毁,因此任何未完成的异步操作(如 AJAX 请求)都会被中断。

  • 对于单页面应用(SPA),通常使用前端路由(如 React Router, Vue Router)来处理页面间的导航,而不是直接修改 window.location.href,因为这样做可以保持应用的状态并避免完整的页面重新加载。

2.3.2 window.location.assign

        与设置 window.location.href 属性类似,assign() 方法也会导致浏览器加载并显示一个新的 URL 指定的文档。assign() 方法提供了更明确的意图,即执行页面跳转或导航操作。

javascript">window.location.assign(url);
  • 页面跳转assign() 方法会导致当前页面被新页面替换,浏览器地址栏中的 URL 会更新为新提供的 URL。

  • 历史记录:与直接修改 window.location.href 或使用 <a> 标签的 href 属性进行跳转不同,assign() 方法会在浏览器的会话历史(session history)中创建一个新的条目。这意味着用户可以使用浏览器的后退按钮(Back button)返回到之前的页面。

  • 安全性:由于 assign() 方法涉及页面跳转,因此它受到浏览器的同源策略(Same-Origin Policy)和安全限制的影响。如果尝试加载一个与当前页面不同源的 URL,可能会因为安全原因而被阻止。

  • 异步操作assign() 方法是异步的,意味着它不会阻塞 JavaScript 的执行。一旦调用,浏览器将开始加载新页面,而脚本的其余部分将继续执行(除非有同步代码或事件监听器等待页面加载完成)。

javascript">// 将用户重定向到 Google 主页  
window.location.assign("https://www.google.com");

当前页面被 Google 主页替换,浏览器地址栏中的 URL 会更新为 https://www.google.com,并且用户可以使用浏览器的后退按钮返回到之前的页面(如果之前有页面的话)。

 2.3.3 window.location.replace() 

换当前页面为新的文档(即新的 URL 指向的页面)的方法

javascript">window.location.replace(url);
javascript">// 提交表单后,将用户重定向到感谢页面,但不保留当前表单页面的历史记录  
window.location.replace("https://www.example.com/thank-you");

执行页面替换操作的方法,它不会在历史记录中留下当前页面的条目,适用于那些不希望用户能够返回的场景。


http://www.ppmy.cn/ops/126284.html

相关文章

sealed class-kotlin中的封闭类

在 Kotlin 中&#xff0c;sealed class&#xff08;密封类&#xff09;是一种特殊的类&#xff0c;用于限制继承的类的数量。密封类可以被用来表示一组有限的类型&#xff0c;通常用于状态管理或表达多种可能的错误类型。 密封类用 sealed 关键字定义&#xff0c;这意味着只能…

C++游戏开发完整学习路径

C游戏开发完整学习路径 引言 随着游戏行业的迅速发展&#xff0c;C作为主要的游戏开发语言&#xff0c;因其高效性和灵活性&#xff0c;依然受到广泛欢迎。C不仅在大型游戏开发中被广泛使用&#xff0c;而且在游戏引擎的构建、性能优化和复杂算法的实现中也扮演着关键角色。本…

2024软件测试面试800题(答案+文档)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、软件测试基础面试题 1、阐述软件生命周期都有哪些阶段? 常见的软件生命周期模型有哪些? 软件生命周期是指一个计算机软件从功能确定设计&#xff0c;到…

el-date-picker设置只有某些日期可选

示例图&#xff1a; <el-date-pickerv-model"topFormObj.upTime"type"date"value-format"timestamp"format"dd/MM/yyyy":picker-options"pickerOptions" /> 固定限制每周的周末周三不可选 data() {return {pickerOp…

vscode快速删除一行的快捷键不管用

vscode快速删除一行的快捷键 在vscode中&#xff0c;快速删除一行的快捷键是CtrlShiftk。 因为搜狗软键盘的快捷键和这个快捷键的按键是冲突了&#xff0c;所以快捷键被搜狗输入法给拦截了。把搜狗软键盘的快捷键关闭了或者修改成别的键就好了&#xff0c; 因为我不怎么用软键…

多功能点击器(文末附Gitee源码)——光遇自动弹奏

之前提到的多功能点击器&#xff0c;使用场景比较多&#xff0c;之前玩光遇喜欢在里面弹琴&#xff0c;想到用这个点击器也能自动弹琴&#xff0c;跟别的自动弹琴脚本不一样&#xff0c;这个比较简单容易操作。 借这个光遇自动弹琴使用教程再讲解一下这个多功能点击头的使用方法…

[含文档+PPT+源码等]精品基于Nodejs实现的微信小程序校园心理健康平台设计与实现

《[含文档PPT源码等]精品基于Nodejs实现的微信小程序校园心理健康平台设计与实现》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等福利&#xff01; 软件开发环境及开发工具&#xff1a; 操作系统&#xff1a;Windows 10、Windows 7、Windows 8 开…

【MySQL】入门篇—SQL基础:SQL语言概述

SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理和操作关系数据库的标准语言。随着信息技术的快速发展&#xff0c;数据成为企业和组织最重要的资产之一。有效地存储、查询和管理数据对于业务决策和运营至关重要。 SQL作为与关…