原生js监听history路由变化

在JavaScript中，监听浏览器历史路由变化通常使用的是`window.addEventListener('popstate', callback)`方法。`popstate`事件会在用户点击浏览器的前进或后退按钮、或者手动修改URL（如在地址栏输入新的URL）时触发。

以下是一个简单的示例：

// 历史记录监听器
window.addEventListener('popstate', function(event) {
  // event对象包含了有关此次导航更改的信息
  console.log('页面发生了变化:', event);

  // 在这里处理路由变化的逻辑，例如更新UI或者执行其他操作
  var newURL = window.location.href;
  console.log('新的URL: ', newURL);
});

// 当需要更新路由时，可以通过replaceState或pushState方法手动触发
// 如：history.pushState(null, null, '/new-url');

记得，`pushState`和`replaceState`方法也可以用来改变URL和浏览器历史记录，但它们不会触发`popstate`事件。如果你需要这种方式来改变状态并立即触发事件，你可以手动调用`event.replaceState`或`event.pushState`。

相关问题

原生js监听vue项目history路由变化

在 Vue.js 项目中，监听 history 路由变化（即 hashbang模式或 HTML5 History API 使用）通常发生在 `beforeRouteUpdate` 或 `beforeRouteLeave` 这样的生命周期钩子里，因为 Vue Router 提供了这些钩子来处理路由更新前后的操作。

以下是一个简单的示例，演示如何使用原生 JavaScript 监听路由变化：

// 在Vue实例中安装vue-router
import Vue from 'vue';
import Router from 'vue-router';

// 创建Vue实例并配置路由器
const app = new Vue({
  // ...其他配置
  router: new Router({
    // ...路由配置
  }),
});

// 定义一个方法来监听路由变化
app.$on('route-updated', () => {
  console.log('当前路由已更新:', this.$route);
});

// 在合适的生命周期钩子里触发route-updated事件
router.beforeEach((to, from, next) => {
  // 更新路由后执行
  next().then(() => {
    app.$emit('route-updated');
  });
});

router.beforeLeave((to, from, next) => {
  // 离开路由前执行，如果返回true则离开，false则留在当前页面
  if (/* 判断是否真的离开 */) {
    app.$emit('route-updated');
  }
  next();
});

原生Js监听普通dom尺寸变化

可以使用`ResizeObserver` API 监听普通 DOM 元素尺寸的变化，这个 API 是浏览器原生支持的。使用方法如下：

创建 `ResizeObserver` 实例：

const observer = new ResizeObserver(entries => {
  // 处理尺寸变化的回调函数
  console.log('DOM 元素尺寸发生变化')
})

将需要监听尺寸变化的 DOM 元素传入 `observe` 方法：

const target = document.querySelector('#target')
observer.observe(target)

当被观察的 DOM 元素的尺寸发生变化时，`ResizeObserver` 的回调函数会被触发。在回调函数中可以获取到当前元素的宽度和高度等信息。

需要注意的是，`ResizeObserver` API 是比较新的 API，不是所有的浏览器都支持，如果需要兼容性可以使用第三方库，比如 `ResizeSensor` 等。