vue中怎么监听window.location.href

在Vue中，你可以使用`watch`属性来监听`window.location.href`的变化。下面是一个示例代码：

export default {
  data() {
    return {
      currentUrl: window.location.href
    }
  },
  watch: {
    currentUrl(newUrl) {
      // 当window.location.href发生变化时，会触发这个函数
      console.log('当前URL发生变化：', newUrl);
    }
  },
  mounted() {
    // 监听window.location.href的变化
    window.addEventListener('popstate', () => {
      this.currentUrl = window.location.href;
    });
  },
  beforeDestroy() {
    // 在组件销毁前移除监听事件
    window.removeEventListener('popstate', () => {
      this.currentUrl = window.location.href;
    });
  }
}

在上面的代码中，我们首先在`data`中定义了一个`currentUrl`属性，用来保存当前的URL。然后，在`watch`中监听`currentUrl`的变化，当`currentUrl`发生变化时，会触发相应的函数。在`mounted`生命周期钩子中，我们使用`addEventListener`来监听`popstate`事件，当浏览器的历史记录发生变化时，会触发这个事件，我们在事件处理函数中更新`currentUrl`的值。最后，在`beforeDestroy`生命周期钩子中，我们移除了对`popstate`事件的监听。

这样，当`window.location.href`发生变化时，就会触发相应的函数，你可以在函数中进行相应的操作。