升级Vue 3.4+后，computed内useRoute出现undefined问题求助

问题背景 #

原用于生成组件标签对象的函数代码：

export function generateRouterTabs (tabs?: RouteRecordRaw[] | undefined, tabsName?: string): {
  name: string
  tabs: IRouterTab[]
} {
  const route = useRoute()

  const mappedName = tabsName || route.name as string | undefined || ''

  const mappedTabs = (tabs || route.matched.find(route => {
    return route.name === route.meta.parentName
  })?.children) || []

  return {
    name: mappedName,
    tabs: mappedTabs.map(_route => ({
      label: _route.meta?.label || '',
      routeName: _route.name as string,
      appComponentID: _route.meta?.appComponentId
    }))
  }
}

在组件的<script setup>中通过计算属性调用：

const tabs = computed(() => generateRouterTabs())

升级Vue至3.4+版本后，出现报错：Cannot read properties of undefined, reading 'name'，错误指向route.name所在行。尝试使用可选链导致应用异常，传递tabs和tabsName参数可解决问题但不想全局重构。

解决方案 #

1. 修复route空值校验与变量重名问题 #

修改函数中mappedName和mappedTabs的赋值逻辑，同时修正find回调的变量重名问题（原回调参数与外层route重名会导致逻辑错误）：

export function generateRouterTabs (tabs?: RouteRecordRaw[] | undefined, tabsName?: string): {
  name: string
  tabs: IRouterTab[]
} {
  const route = useRoute()

  // 先判断route是否存在，再读取name，避免undefined报错
  const mappedName = tabsName || (route?.name as string | undefined) || ''

  // 替换回调参数名为item，避免覆盖外层route变量，同时添加可选链
  const mappedTabs = tabs || (route?.matched.find(item => item.name === item.meta.parentName)?.children) || []

  return {
    name: mappedName,
    tabs: mappedTabs.map(_route => ({
      label: _route.meta?.label || '',
      routeName: _route.name as string,
      appComponentID: _route.meta?.appComponentId
    }))
  }
}

2. 兼容式传入route参数（无需全局重构） #

如果上述修改仍有问题，可在函数中添加可选的externalRoute参数，允许在需要的组件中传入路由实例，同时保留原有调用方式：

// 组件的<script setup>中
const route = useRoute()
const tabs = computed(() => generateRouterTabs(undefined, undefined, route))

// 修改后的函数
export function generateRouterTabs (tabs?: RouteRecordRaw[] | undefined, tabsName?: string, externalRoute?: ReturnType<typeof useRoute>): {
  name: string
  tabs: IRouterTab[]
} {
  const route = externalRoute || useRoute()

  const mappedName = tabsName || (route?.name as string | undefined) || ''

  const mappedTabs = tabs || (route?.matched.find(item => item.name === item.meta.parentName)?.children) || []

  return {
    name: mappedName,
    tabs: mappedTabs.map(_route => ({
      label: _route.meta?.label || '',
      routeName: _route.name as string,
      appComponentID: _route.meta?.appComponentId
    }))
  }
}

3. 升级Vue Router版本 #

确保Vue Router版本与Vue3.4+兼容，建议升级至vue-router@4.2.5+，旧版路由库可能在新响应式系统下存在注入时机问题。

问题原因 #

Vue3.4对响应式系统和组合式API的调用时机做了更严格校验，原函数中直接在普通函数内调用useRoute()，在组件初始化、路由切换过渡等场景下可能无法正确获取路由实例，导致route为undefined；同时原代码中find回调的变量重名问题，在旧版Vue中未触发报错，在严格模式下暴露。

内容的提问来源于stack exchange，提问作者Гаджега Павло