在vue项目中如何获取页面的hash变化？

在Vue项目中，你可以通过监听 $route 对象的 hash 属性变化来获取页面的hash变化。具体来说，你可以使用Vue Router的导航守卫或者watch属性来实现。

方法一：使用Vue Router的导航守卫

Vue Router 提供了一套丰富的导航守卫 API，允许你在路由发生变化时执行一些操作。虽然hash变化不会触发路由的完整导航，但你可以通过监听 $route 的变化来捕获hash的改变。

在你的Vue组件中，你可以添加一个 watch 来监听 $route 的变化：

export default {
  watch: {
    '$route'(to, from) {
      // 当路由变化时，这里的代码会执行
      if (to.hash !== from.hash) {
        console.log('Hash changed:', to.hash);
        // 在这里处理hash变化
      }
    }
  }
}

方法二：直接监听window的hashchange事件

如果你不想依赖Vue Router，或者你的项目结构使得监听 $route 不太方便，你也可以直接在组件中监听 window 对象的 hashchange 事件。

export default {
  mounted() {
    window.addEventListener('hashchange', this.handleHashChange);
  },
  beforeDestroy() {
    window.removeEventListener('hashchange', this.handleHashChange);
  },
  methods: {
    handleHashChange() {
      console.log('Hash changed:', window.location.hash);
      // 在这里处理hash变化
    }
  }
}

在这个例子中，mounted 钩子函数用于在组件挂载时添加事件监听器，而 beforeDestroy 钩子函数用于在组件销毁前移除事件监听器，以避免内存泄漏。handleHashChange 方法会在hash变化时被调用。

注意事项

• 如果你使用的是Vue Router的 history 模式而不是 hash 模式，那么hash的变化将不会触发路由的变化。在这种情况下，你可能需要直接使用 window.location.hash 来读取和监听hash。
• 在使用 window.addEventListener 时，请确保在组件销毁时移除事件监听器，以避免潜在的内存泄漏问题。