js实现跳转界面

使用 window.location.href 实现跳转

通过修改 window.location.href 属性可以直接跳转到新的 URL，这会触发页面刷新并加载新页面。

window.location.href = 'https://www.example.com';

使用 window.location.replace 实现跳转

window.location.replace 方法会替换当前页面在历史记录中的位置，用户不能通过后退按钮返回到原页面。

window.location.replace('https://www.example.com');

使用 window.open 实现跳转

window.open 方法可以在新窗口或标签页中打开 URL，通过参数可以控制打开方式。

window.open('https://www.example.com', '_blank');

使用 meta 标签实现自动跳转

在 HTML 中可以通过 <meta> 标签实现页面自动跳转，设置 http-equiv="refresh" 和跳转时间。

<meta http-equiv="refresh" content="5; url=https://www.example.com">

使用表单提交实现跳转

通过 JavaScript 动态提交表单可以实现页面跳转，适用于需要传递参数的场景。

document.getElementById('myForm').submit();

使用 history.pushState 实现无刷新跳转

history.pushState 方法可以修改浏览器地址栏 URL 而不刷新页面，通常用于单页应用（SPA）。

history.pushState({}, '', '/new-page');

使用 history.replaceState 实现无刷新替换

history.replaceState 方法替换当前历史记录条目而不刷新页面，适用于需要更新 URL 但不触发导航的场景。

history.replaceState({}, '', '/updated-page');

使用锚点实现页面内跳转

通过修改 window.location.hash 可以实现页面内的锚点跳转，不会触发页面刷新。

window.location.hash = '#section-id';

使用导航 API 实现跳转

现代浏览器支持 Navigation API，提供更精细的导航控制能力。

navigation.navigate('https://www.example.com');

使用框架或库的导航方法

在 React、Vue 等框架中，可以使用其提供的导航方法实现页面跳转。

React Router 示例：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/target-page');

Vue Router 示例：

this.$router.push('/target-page');