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

发布于:2024-10-17 ⋅ 阅读:(39) ⋅ 点赞:(0)

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");

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