• 2024-08-22History API
    HistoryAPIAPIhistory.back();history.go(-1)history.forward();history.go(1)history.pushState(state,unused,url?),state:可序列化的jsobject.unused:历史原因,空字符串,url:可选,当页面恢复后有可能会加载它,但是必须同源。它会用来更新浏览器的地址栏,但是它不会加载那个
  • 2024-05-28再次学习History.scrollRestoration
    之前在react.dev的源代码中了解到了这个HIstory的属性,当时写了一篇笔记来记录我对它的理解,现在看来还是一知半解。所以今天打算重新学习一下这个属性,主要从属性以及所属对象的介绍、使用方法,是否开启标准这几个方面来简单展开。什么是scrollRestorationscrollRestoration是一个
  • 2023-11-302023-11-30 记录实用小案例 —— react监听页面返回时执行事件
    useEffect(()=>{consthandlePageBack=()=>{//此处写你想要触发的事件};//监听浏览器的popstate事件,即页面返回事件window.addEventListener('popstate',handlePageBack);//在组件卸载时移除事件监听return()=>{
  • 2023-10-19禁止点击浏览器箭头回退
    方法一:通过监听 popstatepopstate的怎么用?HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。pushState、replaceState两者用法差不多。在需求需要的文件添加window.a
  • 2023-09-24路由
    //全局路由守卫配置router.beforeEach((to,from,next)=>{next(true);})Hash实现hash是URL中hash(#)以及后面部分组成,常用在作用锚点在页面内进行导航,改变URL中的hash部分不会引起页面刷新。通过hashchange时间监听URL的变化,改变URL的方式只有这几种;通过浏览器前
  • 2023-08-14图解 history api 和 React Router 实现原理
    Router是开发React应用的必备功能,那ReactRouter是怎么实现的呢?今天我们就来读一下ReactRouter的源码吧!首先,我们来学一下HistoryAPI,这是基础。什么是history呢?就是这个东西:我打开了一个新的标签页、然后访问baidu.com、sougou.com、taobao.com。长按后退按钮,就会列出
  • 2023-06-02浏览器返回事件popstate
    popstate事件,浏览器返回事件:窗口的历史记录发生变化时会发生该事件PopStateEventwindow.addEventListener('popstate',backChange,false)window.removeEventListener('popstate',backChange,false)functionbackChange(e){console.log('联系ta页面监听到返回了',
  • 2023-04-14popState api详解 history.pushState 案例
    popStateAPI是HTML5引入的一种浏览器历史记录相关的API。它提供了一种监听浏览器历史栈发生变化的途径,当用户通过前进/后退按钮或者其他方式改变了当前的历史状态时,该API就会触发相应的事件,开发者可以在事件处理函数中通过获取到的历史状态数据做出相应的响应。在使用popStateA
  • 2023-04-06vue里浏览器返回键如何禁用
    1mounted(){23//禁用浏览器返回键45history.pushState(null,null,document.URL);67window.addEventListener('popstate',this.disableBrowserBack);89},1011destroyed(){1213//清除popstate事件否则会影响到其他页面