面试题：如何获取 Vue 页面中的 hash 变化？

在 Vue 中，可以通过以下几种方式获取页面 URL 中的 hash 变化（即 # 后面的部分）：

1. 使用 `window.location.hash`

window.location.hash 可以直接获取当前 URL 的 hash 部分，并通过监听 hashchange 事件来响应 hash 的变化。

示例

<template>
  <div>
    <p>当前 hash: {{ currentHash }}</p>
    <button @click="changeHash">修改 hash</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentHash: window.location.hash
    };
  },
  mounted() {
    window.addEventListener('hashchange', this.handleHashChange);
  },
  beforeUnmount() {
    window.removeEventListener('hashchange', this.handleHashChange);
  },
  methods: {
    handleHashChange() {
      this.currentHash = window.location.hash;
    },
    changeHash() {
      window.location.hash = '#new-hash';
    }
  }
};
</script>

说明

window.location.hash：获取当前 URL 的 hash。
hashchange 事件：当 URL 的 hash 发生变化时触发。
beforeUnmount：在组件销毁前移除事件监听，避免内存泄漏。

2. 使用 Vue Router 的 `$route`

如果项目使用了 Vue Router，可以通过 this.$route.hash 获取当前路由的 hash，并通过监听路由变化来响应 hash 的变化。

示例

<template>
  <div>
    <p>当前 hash: {{ currentHash }}</p>
    <router-link to="#section1">跳转到 Section 1</router-link>
    <router-link to="#section2">跳转到 Section 2</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentHash: this.$route.hash
    };
  },
  watch: {
    '$route.hash'(newHash) {
      this.currentHash = newHash;
    }
  }
};
</script>

说明

this.$route.hash：获取当前路由的 hash。
watch：监听 $route.hash 的变化。

3. 使用 Vue Router 的导航守卫

Vue Router 提供了导航守卫（如 beforeEach），可以在路由变化时获取 hash。

示例

// router.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  console.log('Hash changed to:', to.hash);
  next();
});

export default router;

说明

to.hash：获取目标路由的 hash。
beforeEach：在每次路由变化前执行。

4. 使用 `watchEffect`（Vue 3）

在 Vue 3 中，可以使用 watchEffect 监听 window.location.hash 的变化。

示例

<template>
  <div>
    <p>当前 hash: {{ currentHash }}</p>
    <button @click="changeHash">修改 hash</button>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const currentHash = ref(window.location.hash);

    watchEffect(() => {
      currentHash.value = window.location.hash;
    });

    const changeHash = () => {
      window.location.hash = '#new-hash';
    };

    return {
      currentHash,
      changeHash
    };
  }
};
</script>

说明

watchEffect：自动追踪依赖的变化并执行回调。
ref：用于创建响应式数据。

5. 使用 `onBeforeRouteUpdate`（Vue 3 + Vue Router）

在 Vue 3 中，可以使用 onBeforeRouteUpdate 监听路由变化，包括 hash 的变化。

示例

<template>
  <div>
    <p>当前 hash: {{ currentHash }}</p>
    <router-link to="#section1">跳转到 Section 1</router-link>
    <router-link to="#section2">跳转到 Section 2</router-link>
  </div>
</template>

<script>
import { ref, onBeforeRouteUpdate } from 'vue';

export default {
  setup() {
    const currentHash = ref(window.location.hash);

    onBeforeRouteUpdate((to) => {
      currentHash.value = to.hash;
    });

    return {
      currentHash
    };
  }
};
</script>