vue 监听 location.hash

### 回答1：
在 Vue 中，可以使用 `window.addEventListener` 监听浏览器的 `hashchange` 事件来监听 URL 的哈希变化。

下面是一个简单的 Vue 组件示例，它可以监听 URL 的哈希变化，并将哈希值存储在 `hash` 数据属性中：

<template>
  <div>
    <p>当前 URL 的哈希值为：{{ hash }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hash: window.location.hash,
    };
  },
  mounted() {
    window.addEventListener("hashchange", () => {
      this.hash = window.location.hash;
    });
  },
};
</script>

在上面的代码中，我们在组件的 `mounted` 钩子函数中注册了一个 `hashchange` 事件监听器，每当 URL 的哈希值发生变化时，就会更新组件的 `hash` 数据属性。这样，我们就可以在模板中显示当前 URL 的哈希值了。

### 回答2：
Vue 可以通过监听 `location.hash` 来实现对 URL 中的 hash 值的监控。当 URL 中的 hash 发生变化时，Vue 可以根据新的 hash 值进行相应的操作或响应式更新。

要实现对 `location.hash` 的监听，可以通过以下步骤：

1. 在 Vue 组件中，可以使用 `window.addEventListener` 方法来监听 `hashchange` 事件，即当 URL 中的 hash 发生变化时触发。可以将该事件监听的回调函数添加到 Vue 实例的 `created` 或 `mounted` 生命周期钩子中。

2. 在回调函数中，可以通过 `location.hash` 属性获取当前 URL 中的 hash 值。可以将其保存到 Vue 实例的 data 中的一个变量中或者直接在回调函数中进行相应的逻辑处理。

3. 通过在回调函数中进行相关的逻辑处理，可以根据 URL 中的 hash 值来更新组件的状态、改变数据或跳转到相应的页面。

4. 如果需要触发一些 Vue 中的方法，可以使用 `$emit` 方法来在回调函数中触发自定义事件，在组件的其他地方监听并相应地处理。

需要注意的是，当需要监听 `location.hash` 时，应确保Vue组件挂载时URL中的hash值已经设置好，以避免监听不到的问题。同时，监听 `location.hash` 的方式仅适用于浏览器环境。

### 回答3：
在Vue中监听location.hash主要是为了实现根据URL的hash值进行页面的动态跳转或显示不同的内容。Vue提供了watch选项和$watch方法用于监听数据的变化，但是由于location.hash是原生JS对象，不是Vue实例的响应式数据，所以无法直接通过watch或$watch方法进行监听。

一种解决方法是使用Vue提供的created()钩子函数，在组件创建后立即执行一段代码来监听location.hash的变化。具体的代码如下：

created() {
window.addEventListener('hashchange', this.handleHashChange);
},
methods: {
handleHashChange() {
// 当location.hash发生变化时，执行相关逻辑
// 可以根据不同的hash值，做出不同的操作
}
}

通过window对象的hashchange事件，我们可以监听到location.hash的变化，然后在handleHashChange方法中编写具体的逻辑代码，根据不同的hash值来实现页面的跳转或显示不同的内容。

需要注意的是，使用了addEventListener方法添加的事件监听器，在组件销毁时应该及时移除，可以通过destroyed()钩子函数来实现。具体的代码如下：

destroyed() {
window.removeEventListener('hashchange', this.handleHashChange);
}

这样就能够在Vue中正确监听和处理location.hash的变化了。