当前位置:首页 > JavaScript

js实现页面跳转

2026-01-12 12:51:18JavaScript

使用 window.location.href

通过修改 window.location.href 属性实现页面跳转:

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

这种方式会保留浏览历史,用户可以通过后退按钮返回上一页。

使用 window.location.replace

通过 window.location.replace 方法实现跳转,但不会保留历史记录:

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

适合用于不希望用户返回的场景,如登录后跳转。

使用 window.open

在新窗口或标签页中打开页面:

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

第二个参数 _blank 表示在新标签页打开,可替换为 _self 在当前窗口打开。

js实现页面跳转

使用 meta 标签自动跳转

在 HTML 中插入 meta 标签实现自动跳转:

document.head.innerHTML += '<meta http-equiv="refresh" content="3;url=https://example.com">';

content 中的数字表示延迟跳转的秒数。

使用表单提交跳转

通过动态创建表单实现跳转:

js实现页面跳转

const form = document.createElement('form');
form.method = 'POST';
form.action = 'https://example.com';
document.body.appendChild(form);
form.submit();

适用于需要提交数据的 POST 请求跳转。

使用 history.pushState

通过 History API 修改 URL 而不刷新页面:

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

适用于单页应用(SPA)的路由跳转,需配合路由库使用。

使用 location.assign

调用 location.assign 方法实现跳转:

location.assign('https://example.com');

效果与直接修改 href 类似,但可读性更好。

标签: 跳转页面
分享给朋友:

相关文章

如何react页面

如何react页面

创建 React 页面 使用 create-react-app 快速初始化项目: npx create-react-app my-app cd my-app npm start 编写组件代码 在 s…

vue实现结算页面

vue实现结算页面

Vue 实现结算页面的核心步骤 数据绑定与表单验证 使用 Vue 的 v-model 绑定表单数据,例如收货地址、支付方式等。通过 Vue 的 computed 属性计算总价,结合 v-if 或 v-…

vue实现点击跳转

vue实现点击跳转

Vue 实现点击跳转的方法 在 Vue 中实现点击跳转可以通过以下几种方式: 使用 router-link router-link 是 Vue Router 提供的组件,用于声明式导航。适合在模板中…

vue实现前端跳转

vue实现前端跳转

Vue 实现前端跳转的方法 在 Vue 中实现前端跳转通常使用 Vue Router,以下是几种常见的跳转方式: 声明式导航(模板中使用 <router-link>) 在模板中直接使用…

vue实现引导页面

vue实现引导页面

vue实现引导页面的方法 使用Vue实现引导页面可以通过多种方式完成,以下是几种常见的方法: 使用第三方库driver.js 安装driver.js库: npm install drive…

vue 实现页面注册

vue 实现页面注册

Vue 实现页面注册功能 创建注册表单组件 在 Vue 项目中创建一个注册表单组件,通常命名为 Register.vue。该组件包含用户名、邮箱、密码等输入字段,以及提交按钮。 <templ…