window.location.href和window.open方法导航

window.location.href 是用于获取或设置当前窗口的 URL 的属性，它通常用于导航到新的页面或重新加载当前页面。它的值是一个字符串，包含当前页面的 URL。要导航到当前页面内的不同路由（例如 React Router 中的路由），可以通过设置 window.location.href 的值来实现。

导航到内部路由的方法

1. 相对路径：

   如果你要导航到相对于当前页面的路径，通常你可以使用相对路径。例如

   window.location.href = '/path/to/route';
   

2. 使用绝对路径：

   如果你知道内部路由的完整路径（包括主机名和路径部分），可以直接将其赋值给 window.location.href。例如：

   window.location.href = 'https://example.com/path/to/route';
   

     3.动态生成路径：

对于需要动态生成路径的情况，可以根据具体的逻辑生成完整的 URL 或相对路径，然后将其赋值给 window.location.href。

React Router 中的注意事项

如果你正在使用 React Router 或其他客户端路由库，通常不需要直接使用 window.location.href 来进行路由导航，因为这种方式会完全刷新页面，导致 React 组件状态丢失。React Router 提供了 <Link> 组件或 history API（如 history.push()）来进行内部路由的导航，这些方法能够在不刷新整个页面的情况下实现路由跳转。

window.open() 方法用于在浏览器中打开新窗口或标签页，并加载指定的 URL。它可以用来导航到内部路由或任何有效的 URL，包括相对路径、绝对路径以及带参数的路径。

使用方法

打开新窗口或标签页

window.open('https://example.com/path/to/route', '_blank');

 

• 第一个参数是要打开的 URL。可以是绝对路径、相对路径或带参数的路径。
• 第二个参数是窗口的名称或标识符。通常使用 '_blank' 表示在新标签页或窗口中打开。

导航到相对路径

window.open('/path/to/route', '_blank');

• 在 React 应用中，如果使用相对路径，则会相对于当前域名和路径进行导航。

动态生成路径

const route = `/path/to/${dynamicId}`;
window.open(route, '_blank');

• 可以根据需要动态生成路径，并将其作为参数传递给 window.open()。

注意事项

• 弹出窗口阻止器：浏览器通常会阻止自动打开新窗口，特别是在没有用户交互的情况下。在大多数现代浏览器中，必须在用户操作（例如点击按钮）中触发 window.open() 才能成功打开新窗口。

• 安全性考虑：打开新窗口可能会被浏览器的弹出窗口阻止功能阻止，或者被浏览器设置为只有在安全操作下才能使用。因此，建议仅在确保用户体验和安全性的情况下使用。