前端页面跳转学习笔记

1. 原生页面跳转

• 使用window.open打开新窗口
• 使用Location下的href、assign()和replace()进行页面跳转，页面数据都会重新加载；replace()方法与assign()方法不同的是，调用replace()方法后，当前页面不会保存到会话历史中（session History），这样用户点击回退按钮时，将不会再跳转到该页面。

例子

location.href = 'https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload';
document.location.assign('https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload');
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location/reload');

• History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

例子

history.pushState({name:'123'}, 'hhhhhh', 'https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload');
history.replaceState({name:'123'}, 'hhhhhh', 'https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload');

2.React页面跳转

• Umi history
  • 使用replace()替换堆栈中的当前项。
  • 使用push()将新条目推送到历史堆栈。

3.VUE页面跳转

• 不同的历史模式,hash和history
  • push:通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。
  • replace:通过替换历史堆栈中的当前 entry，以编程方式导航到一个新的 URL。

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： Nicole.Lei
• 本文链接： https://nicolelei.github.io/2022/03/13/web-page-forward/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！