[router] router中会遇到router为undefined情况导致route.path报错

[xiaotuanyu120]

tdesign-vue-next-starter 版本

0.6.1

重现链接

No response

重现步骤

macos: 13.0.1
node: v22.4.1
nvm: 10.8.1

按照指引，通过如下选择初始化项目

然后npm run dev访问页面，切换左侧栏中的任意其他项目

期望结果

期望是正常切换到其他左侧栏

实际结果

实际会卡住，然后控制台报错：

index.ts:62 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'path')
    at getActive (index.ts:62:14)
    at MenuContent.vue:45:31
    at ReactiveEffect.fn (chunk-KBVZHBZ4.js?v=35cacf22:1225:13)
    at ReactiveEffect.run (chunk-KBVZHBZ4.js?v=35cacf22:424:19)
    at get value (chunk-KBVZHBZ4.js?v=35cacf22:1237:107)
    at triggerComputed (chunk-KBVZHBZ4.js?v=35cacf22:442:20)
    at get dirty (chunk-KBVZHBZ4.js?v=35cacf22:396:11)
    at instance.update (chunk-KBVZHBZ4.js?v=35cacf22:6596:19)
    at callWithErrorHandling (chunk-KBVZHBZ4.js?v=35cacf22:1647:33)
    at flushJobs (chunk-KBVZHBZ4.js?v=35cacf22:1863:9)

框架版本

vue(3.2.31)

浏览器版本

chrome(126.0.6478.127)

系统版本

macos(13.0.1)

Node版本

22.4.1

补充说明

我本地通过将源代码src/router/index.ts中的

export const getActive = (maxLevel = 3): string => {
  const route = useRoute();
  if (!route.path) {
    return '';
  }
  return route.path
    .split('/')
    .filter((_item: string, index: number) => index <= maxLevel && index > 0)
    .map((item: string) => `/${item}`)
    .join('');
};

修改为

export const getActive = (maxLevel = 3): string => {
  const route = useRoute();
  if (!route || !route.path) {
    return '';
  }
  return route.path
    .split('/')
    .filter((_item: string, index: number) => index <= maxLevel && index > 0)
    .map((item: string) => `/${item}`)
    .join('');
};

之后，可以正常访问，但是我不清楚这个route对象为undefined是否符合预期

[github-actions]

👋 @xiaotuanyu120，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @timi137137 @liweijie0812 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @xiaotuanyu120 。

[timi137137]

请通过npm ls vue 查看本地vue版本

[xiaotuanyu120]

user@192 fosswell-plt-td % npm ls vue
[email protected] /Users/user/Documents/github.com/xiaotuanyu120/fosswell-plt-td
├─┬ @vitejs/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
  └─┬ @vue/[email protected]
    └── [email protected] deduped

[xiaotuanyu120]

按照前面的做法，把route提前检查了下是否为undefined之后，有了新的warn

[Vue warn]: inject() can only be used inside setup() or functional components.

网查了下，好像是因为useRoute()这个函数有inject方法，这个必须要放到setup()中去。

所以我做了如下改动：

1. 修改getActive()方法，把useRoute()移除，改为接收route参数

export const getActive = (route: RouteLocationNormalizedLoaded | null | undefined, maxLevel: number = 3): string => {
  if (!route || !route.path) {
    return '';
  }
  return route.path
    .split('/')
    .filter((_item: string, index: number) => index <= maxLevel && index > 0)
    .map((item: string) => `/${item}`)
    .join('');
};

2. 将使用getActive的地方都做如下改造

import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
...getActive(route)...

这样我本地环境就不会再报错了，麻烦看下这样是否合理，若不合理，正确的解决方案应该是怎样的

[timi137137]

重复 #698