1、使用JavaScript中的location对象
location.href
:可以设置或获取当前页面的 URL,通过将其值设置为新的 URL 可实现页面跳转。location.href = "https://www.example.com";
。
location.aSSign()
:与location.href
类似,接受一个 URL 参数作为要跳转的目标地址,如:location.assign("https://www.example.com");
。
location.replace()
:实现页面跳转,但会替换当前页面的历史记录,导致用户无法返回到前一个页面。location.replace("https://www.example.com");
。
2、使用JavaScript中的window对象
window.open()
:可以在新窗口或选项卡中打开一个指定的 URL。window.open("https://www.example.com");
。
top.window.location.href
:覆盖顶层地址跳转,在 iframe 嵌套内页跳转可以覆盖顶层地址打开新页面,且浏览器无拦截。top.window.location.href = 'https://www.baidu.com';
。
3、使用HTML中的a标签
在当前页面打开:<a href="https://www.baidu.com">跳转</a>
。
在新窗口打开,设置target属性为_blank:<a href="https://www.baidu.com" target="_blank">跳转</a>
。
4、使用meta标签
通过设置httpequiv
属性为refresh
,并指定时间后跳转到特定 URL,可用于进入页面直接跳转等情况。<meta httpequiv="refresh" content="5;url=http://www.w3school.com.cn">
。
5、使用表单提交
创建一个隐藏的表单,将目标 URL 设置为表单的 action 属性,然后调用表单的 submit() 方法来实现页面跳转。
var form = document.createElement("form"); form.action = "http://www.example.com"; form.method = "POST"; document.body.appendChild(form); form.submit();
需要注意的是,这种方式通常用于 POST 请求跳转,如果不需要传递数据给服务器,一般较少使用。
6、使用Vue Router(适用于Vue项目)
$router.push()
:用于在路由历史中向前添加一条记录,即跳转到一个新的 URL 会改变浏览器当前 URL 会改变。this.$router.push('/t?index=1');
。
$router.replace()
:跟$router.push()
类似,不同的是它不会向 history 添加新记录,而是跟它的名称一样 — 替换掉当前的 history 记录。this.$router.replace('/t?index=1');
。
7、使用React Router(适用于React项目)
useHistory()
:导入useHistory
钩子,然后在函数组件中使用let history = useHistory();
来获取 history 对象,再通过history.push()
方法进行页面跳转。import { useHistory } from "reactrouterdom"; let history = useHistory(); history.push("/path");
。
8、服务器内部跳转(请求跳转)
在服务器端代码中进行跳转,例如在 Java 的 Controller 中可以使用return "redirect:/路径";
来实现跳转;在 Node.js 中可以使用res.redirect('路径')
等,这种跳转方式通常用于处理一些需要服务器端逻辑判断后再决定跳转的情况。
9、使用模板引擎中的跳转标签(如FreeMarker)
在 FreeMarker 模板中,可以使用<#include>
指令来引入其他模板文件,从而实现页面跳转的效果。<#include "templateName.ftl">
。
页面跳转有多种方法可供选择,开发者可以根据具体的需求、应用场景以及所使用的技术栈来选择最适合的方法。