1.强制刷新当前页面
在完成某一操作后需要刷新当前整体页面,或者部分模块需要重新渲染数据。强制刷新页面可能会影响用户体验,特别是在需要保持页面状态的情况下。使用强制刷新页面需要谨慎使用。
2.方法
2.1 Vue Router 的 router.go(0)
方法:
methods: {
refreshPage() {
this.$router.go(0);
}
}
2.2 window.location.reload()
方法
methods: {
refreshPage() {
window.location.reload();
}
}
强制从服务器重新加载页面,而不是从缓存中加载。
2.3 window.location.href
或 window.location.assign()
方法:
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。
console.log(window.location.href);
设置当前页面的 URL,通过给 window.location.href
赋一个新的 URL 值来将用户重定向到另一个页面。
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()
方法提供了更明确的意图,即执行页面跳转或导航操作。
window.location.assign(url);
页面跳转:
assign()
方法会导致当前页面被新页面替换,浏览器地址栏中的 URL 会更新为新提供的 URL。历史记录:与直接修改
window.location.href
或使用<a>
标签的href
属性进行跳转不同,assign()
方法会在浏览器的会话历史(session history)中创建一个新的条目。这意味着用户可以使用浏览器的后退按钮(Back button)返回到之前的页面。安全性:由于
assign()
方法涉及页面跳转,因此它受到浏览器的同源策略(Same-Origin Policy)和安全限制的影响。如果尝试加载一个与当前页面不同源的 URL,可能会因为安全原因而被阻止。异步操作:
assign()
方法是异步的,意味着它不会阻塞 JavaScript 的执行。一旦调用,浏览器将开始加载新页面,而脚本的其余部分将继续执行(除非有同步代码或事件监听器等待页面加载完成)。
// 将用户重定向到 Google 主页
window.location.assign("https://www.google.com");
当前页面被 Google 主页替换,浏览器地址栏中的 URL 会更新为
https://www.google.com
,并且用户可以使用浏览器的后退按钮返回到之前的页面(如果之前有页面的话)。
2.3.3 window.location.replace()
换当前页面为新的文档(即新的 URL 指向的页面)的方法
window.location.replace(url);
// 提交表单后,将用户重定向到感谢页面,但不保留当前表单页面的历史记录
window.location.replace("https://www.example.com/thank-you");
执行页面替换操作的方法,它不会在历史记录中留下当前页面的条目,适用于那些不希望用户能够返回的场景。