原生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();
});