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

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

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