一、不在JS中跳转
如果你不想在 JavaScript 中写页面跳转，而是希望使用 HTML 或者其它前端方式来实现页面跳转，下面是一些常见的方法：
1. 使用 <a> 标签进行跳转
HTML 中最常见的跳转方式就是使用 <a> 标签。它可以让用户点击链接进行页面跳转。
<a href="https://www.example.com">跳转到 Example</a>
如果你想要跳转到其他页面，可以设置 href 属性为目标页面的 URL。点击链接后，页面会跳转。
示例：
<a href="about.html">关于我们</a>
如果你希望跳转到新窗口：
<a href="https://www.example.com" target="_blank">跳转到 Example</a>
target="_blank" 属性会在新窗口中打开目标页面。
2. 使用 <form> 提交表单进行跳转
如果需要在用户提交表单时跳转，可以使用 HTML 表单 (<form>) 元素。
<form action="https://www.example.com" method="get"> <button type="submit">提交并跳转</button> </form>
表单的 action 属性指定了提交的目标 URL，method 属性指定了请求的方法（GET 或 POST）。点击提交按钮时，浏览器会跳转到指定的 URL。
3. 使用 <meta> 标签进行自动跳转
如果你希望页面加载完成后自动跳转到另一个 URL，可以使用 <meta> 标签。
<head> <meta http-equiv="refresh" content="3;url=https://www.example.com"> </head>
content="3;url=https://www.example.com" 表示页面将在 3 秒后自动跳转到指定的 URL。你可以根据需要修改时间（单位为秒）。
4. 使用 <base> 标签设置基本的跳转路径
如果你希望页面中所有相对链接都指向某个固定的基础 URL，可以使用 <base> 标签。
<head> <base href="https://www.example.com/"> </head>
此时，页面中所有相对路径的链接都会基于 https://www.example.com/ 进行解析。
5. 使用 <iframe> 标签进行嵌入页面跳转
如果你想要在当前页面内跳转并显示另一个页面，而不是完整地跳转到另一个页面，可以使用 <iframe> 标签将另一个页面嵌入当前页面。
<iframe src="https://www.example.com" width="600" height="400"></iframe>
这样，目标页面会被加载到 <iframe> 内，而当前页面仍然保持不变。
这些方法中，<a> 标签是最常用的页面跳转方式。如果你只需要用户点击链接跳转页面，使用 <a> 标签最为简单和直观。其他方式则适用于不同的场景，具体选择哪一种取决于你的需求。
二、在JS中跳转
在 HTML5 中使用 JavaScript 来实现页面跳转是非常简单的。你可以通过以下几种方式来实现：
1. 使用 window.location 实现页面跳转
window.location 是 JavaScript 提供的一个对象，可以用于获取当前页面的 URL 或设置新的 URL 来进行页面跳转。
// 跳转到一个新的页面
window.location.href = 'https://www.example.com';
// 或者使用相对路径跳转
window.location.href = 'anotherpage.html';
2. 使用 window.location.assign() 方法
assign() 方法用于加载新的页面，它与直接设置 window.location.href 很相似。不同之处在于 assign() 方法会将当前页面添加到浏览器的历史记录中。
window.location.assign('https://www.example.com');
3. 使用 window.location.replace() 方法
replace() 方法也用于跳转页面，但是它不会将当前页面添加到浏览器的历史记录中。使用这种方式跳转后，用户不能通过浏览器的“后退”按钮返回到原来的页面。
window.location.replace('https://www.example.com');
4. 使用 window.location.reload() 刷新当前页面
如果你只想刷新当前页面，可以使用 reload() 方法。
window.location.reload();
5. 跳转到一个特定的锚点
如果你想跳转到页面中的某个位置，可以使用锚点（#）来实现跳转：
window.location.href = '#section-id'; // 假设页面中有 id="section-id" 的元素
6. 使用 location 对象中的其他属性
你还可以使用 window.location 的其他属性，如：
window.location.pathname 获取或设置路径部分
window.location.search 获取或设置查询字符串
window.location.hash 获取或设置哈希部分
例子：跳转到某个页面并附带参数
window.location.href = 'https://www.example.com?param1=value1¶m2=value2';
总结
window.location.href 和 window.location.assign() 都用于跳转页面，但前者会直接改变当前页面的 URL，后者则会将跳转添加到浏览器的历史记录中。
window.location.replace() 会跳转并替换掉当前页面，因此无法通过浏览器的“后退”按钮返回。
window.location.reload() 用于刷新当前页面。
你可以根据实际需要选择不同的方式来跳转页面。
三、代码示例
index.html 和 detail.html在同一目录下，实现页面跳转。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>Hello World!<br /><label for="tel">手机号</label><input id="tel" v-model="" placeholder="tel" placeholder-class="input-placeholder" @input=""><!-- <a href="detail.html" >点我查看详情</a> --> <!-- 跳转 --><a href="detail.html" target="_blank">点我查看详情</a> <!-- 跳转+打开新标签页 --><br /><!-- <button onclick="window.location.href='detail'">详情</button> --><button id="btn">详情</button><script>const btn = document.getElementById('btn').addEventListener('click', function () {console.log('成功！');//window.location.href = 'detail.html' // 跳转//window.location.assign('detail.html') // 跳转window.open('detail.html', '_blank') // 跳转+打开新标签页})</script>
</body></html>
