检测Vue单页应用程序的URL更改（监听路由更新）

Question

我将JavaScript脚本注入到了一个已有的网站并在其上运行。
该网站是使用Vue.js构建的SPA。
我想要检测这个SPA中的URL更改（路由），并调用我的自有函数，将新的URL作为参数传递。
我尝试监听以下事件（基于this和this）：

window.addEventListener("hashchange", myFunc);
window.addEventListener("popstate", myFunc);

但是在任何时候都没有触发myFunc。我还尝试使用React（使用react-router）这样做，但它没有得到任何路由更新事件。我必须使用Vue才能实现吗？

- amiregelz

Answer 1

在 Vue 中，您可以使用 watcher 属性来监视任何变量的更改并处理它们，包括路由路径和路由参数。

watch:{
  $route: {
    handler: function(newRouteValue){
      // put your code here
    },
    deep: true
  }
}

Vue中的深度监听是为了监听深层对象的变化。但如果不必要，可以将其移除。

- Yassin Shanwany

---

问题是 - 是否可以使用原生JS或React完成？我不想为此创建Vue应用程序 :) - amiregelz

Answer 2

只要网页有唯一的标题，你可以使用一个“mutation observer”来监测页面标题的变化，在变化发生时读取 URL 并将其传递给你的函数。类似这样：

const config = { attributes: true, childList: true, subtree: true };

  let currentTitle;
  const pageTitle = document.querySelector('title');

  const callback = (mutationList, observer) => {
    mutationList.forEach((mutation) => {
      if (mutation.target.localName === 'title' && currentTitle !== mutation.target.innerText) {
        currentTitle = mutation.target.innerText;
        const currentUrl = window.location.href;
        myFunction(currentUrl);
      }
    });
  };

const observer = new MutationObserver(callback);

observer.observe(pageTitle, config);

- nosleepever