当前位置:首页 > JavaScript

js怎么实现页面跳转

2026-01-30 15:31:13JavaScript

使用 window.location.href

通过修改 window.location.href 可以实现页面跳转。将目标 URL 赋值给该属性后,浏览器会立即加载新页面。

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

使用 window.location.replace

window.location.replacehref 类似,但不会在浏览历史中留下当前页面的记录。用户无法通过后退按钮返回前一页。

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

使用 window.open

window.open 可以在新窗口或标签页中打开目标 URL。通过参数控制是否在新窗口打开。

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

使用 location.assign

location.assign 加载新页面,同时保留当前页面在浏览历史中,允许用户通过后退按钮返回。

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

使用 meta 标签自动跳转

在 HTML 的 <head> 部分添加 meta 标签,可以设置自动跳转。适用于无需用户交互的场景。

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

使用表单提交跳转

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

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

使用 history.pushState 或 replaceState

history.pushState 修改浏览历史而不刷新页面,适用于单页应用(SPA)。需配合路由库或监听 popstate 事件。

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

使用锚点跳转

修改 location.hash 可以跳转到页面内的锚点,或触发 SPA 的路由变化。

js怎么实现页面跳转

window.location.hash = '#section1';

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

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 或直接使用 window.location 实现页面跳转,适用于普通跳转或带参数的 URL。 // 方…

实现vue页面回退

实现vue页面回退

监听浏览器返回事件 在Vue组件中使用beforeRouteLeave导航守卫,可以监听路由变化。该方法在离开当前路由前触发,适用于需要确认或保存数据的场景。 beforeRouteLeave(…

js实现页面跳转

js实现页面跳转

使用 window.location.href 通过修改 window.location.href 属性实现页面跳转: window.location.href = 'https://example…

vue实现关闭页面

vue实现关闭页面

关闭当前页面的方法 在Vue中关闭当前页面通常涉及调用浏览器提供的JavaScript方法。以下是几种常见的实现方式: window.close()方法 methods: { closeWin…

vue页面实现pdf

vue页面实现pdf

在Vue中实现PDF功能 使用vue-pdf库 安装vue-pdf库: npm install vue-pdf 在Vue组件中使用: <template> <pdf :src…

vue实现封锁页面

vue实现封锁页面

Vue 实现封锁页面的方法 使用全局路由守卫 在 Vue 项目中,可以通过 router.beforeEach 全局路由守卫拦截导航,实现页面封锁。例如,检查用户权限或登录状态,未通过验证时重定向到指…