Vue项目启动时如何通过路由实例正确获取当前路由hash值

问题原因 #

出现这个现象是vue-router初始化时序导致的：App.vue的<script setup>同步代码执行时，路由还未完成首次URL解析，此时useRoute()返回的路由对象还处于初始状态，hash字段为空。等路由实例完成初始跳转解析后，路由对象的属性才会更新，但你是同步执行的一次性赋值，自然拿不到解析后的值。

你不需要强制依赖window对象读取hash，有两种基于vue-router原生API的可行方案：

方案1：使用响应式取值（推荐，支持后续路由更新） #

不要在setup同步阶段给ref手动赋值，直接基于route对象做响应式派生，路由解析完成、后续路由hash变更时，值都会自动更新：

<script setup lang="ts">
import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();
// 计算属性会自动追踪route.hash的变化
const hashFromRoute = computed(() => route.hash.substring(1));
const hashFromWindow = window.location.hash.substring(1);
</script>

<template>
  <div>
    <div>Hash from route: {{ hashFromRoute }}</div>
    <div>Hash from window: {{ hashFromWindow }}</div>
  </div>
  <!-- ... render router view here ... -->
</template>

这是vue-router官方推荐的标准用法，适配所有路由模式（hash/history），也兼容自定义路由base、参数编码等配置，不会出现和路由状态不一致的问题。

方案2：等待路由就绪后读取（仅需首次加载取值时使用） #

如果你只需要在应用启动阶段读取一次初始hash，不需要响应后续hash变化，可以等待路由的isReady()状态完成后再取值：

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from "vue";

const hashFromRoute = ref("");
const hashFromWindow = ref("");

const route = useRoute();
const router = useRouter();

hashFromWindow.value = window.location.hash.substring(1);

onMounted(async () => {
  // 等待路由完成首次URL解析
  await router.isReady();
  hashFromRoute.value = route.hash.substring(1);
})
</script>

<template>
  <div>
    <div>Hash from route: {{ hashFromRoute }}</div>
    <div>Hash from window: {{ hashFromWindow }}</div>
  </div>
  <!-- ... render router view here ... -->
</template>

注意：直接读取window.location.hash虽然在纯客户端CSR场景下可以生效，但如果后续项目接入SSR、或者配置了路由base、自定义hash解析规则，直接读window对象的值可能和路由实例维护的状态不一致，优先使用路由实例API取值更稳妥。

内容的提问来源于stack exchange，提问作者user19025657