Vue3.3.2中能否在组合式函数内调用useRoute？

问题现象 #

在Vue 3.3.2 + vue-router 4.2.0项目中，直接在组件<script setup>内调用useRoute可以正常监听路由变化，但将逻辑移到模块顶层的组合式代码中时，useRoute返回undefined，且computed仅执行一次，路由切换时无任何响应。

错误根源 #

• 组合式API（如useRoute）必须在Vue组件实例的上下文中调用。模块顶层代码会在应用初始化阶段执行，此时没有任何组件实例，无法获取路由上下文，导致useRoute返回undefined。
• JS模块是单例结构，顶层代码只会执行一次，即使路由发生变化，也不会重新执行useRoute和computed逻辑。

正确实现方案 #

1. 修正组合式函数写法 #

将组合式逻辑封装为函数，确保useRoute在组件上下文内执行：

composables/useRouteTest.js

import { useRoute } from 'vue-router'
import { computed } from 'vue'

// 封装为函数，每次调用都会在组件上下文内执行逻辑
export default function useRouteTest() {
  const route = useRoute()
  const path = computed(() => {
    console.log(`step 1`)
    if (!route) {
      console.log(`step 2`)
      return
    }
    if (!route.path) {
      console.log(`step 3`)
      return
    }
    console.log(`step 4`)
    return route.path
  })

  return { path }
}

2. 组件中调用组合式函数 #

在组件的<script setup>中调用该函数，获取响应式数据：

App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import useRouteTest from '@/composables/useRouteTest'
// 调用函数，在组件上下文内初始化路由逻辑
const { path } = useRouteTest()
</script>

<template>
  <p>path = {{ path }}</p>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
  <RouterView />
</template>

原理说明 #

• 每次调用useRouteTest()时，函数会在当前组件的实例上下文内执行，此时useRoute能正确获取到路由的响应式对象。
• computed依赖route.path，路由切换时route.path更新，computed会自动重新计算，符合预期。

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