js实现重定向
使用 window.location 实现重定向
通过修改 window.location 对象的属性可以实现页面重定向。以下是几种常见方式：
-
直接赋值
href：window.location.href = "https://example.com";
这种方式会记录跳转前的页面到浏览历史中。 -
使用
assign()方法：window.location.assign("https://example.com");
效果与直接修改href相同，但可读性更好。 -
使用
replace()方法：window.location.replace("https://example.com");
替换当前页面，不会在浏览历史中留下记录。
使用 window.location 的其他属性
除了 href，还可以通过以下属性实现重定向：
-
修改
pathname：window.location.pathname = "/newpath";
仅修改路径部分，保持域名不变。 -
修改
hostname：window.location.hostname = "new.example.com";
仅修改域名部分。
使用 meta 标签实现重定向
在 HTML 的 <head> 中添加 <meta> 标签，可以设定定时重定向：
<meta http-equiv="refresh" content="5; url=https://example.com">content 中的数字表示延迟时间（秒），url 指定目标地址。
使用 HTTP 响应头重定向
通过服务器端设置 HTTP 响应头实现重定向，适用于需要 SEO 友好的场景：
// Node.js 示例（如 Express）
res.writeHead(302, { 'Location': 'https://example.com' });
res.end();状态码 302 表示临时重定向，301 表示永久重定向。
使用框架路由重定向
在单页应用（SPA）框架中，通常通过路由库实现：
-
React (React Router v6)：
import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/target-path'); -
Vue (Vue Router)：
this.$router.push('/target-path');
注意事项
- 性能影响：客户端重定向可能导致额外网络请求，建议优先使用服务器端重定向。
- SEO 优化：搜索引擎对
301/302响应头的处理更友好，而 JavaScript 重定向可能不被收录。 - 测试兼容性：确保目标浏览器支持使用的 API（如
replace()兼容所有主流浏览器）。
