[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[bot]]

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

[github-actions[bot]]

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

[timi137137]

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

[xiaotuanyu120]

user@192 fosswell-plt-td % npm ls vue
fosswell-plt@0.6.1 /Users/user/Documents/github.com/xiaotuanyu120/fosswell-plt-td
├─┬ @vitejs/plugin-vue@2.3.4
│ └── vue@3.4.31 deduped
├─┬ pinia@2.1.7
│ ├─┬ vue-demi@0.14.8
│ │ └── vue@3.4.31 deduped
│ └── vue@3.4.31 deduped
├─┬ qrcode.vue@3.4.1
│ └── vue@3.4.31 deduped
├─┬ tdesign-icons-vue-next@0.1.12
│ └── vue@3.4.31 deduped
├─┬ tdesign-vue-next@0.26.2
│ └── vue@3.4.31 deduped
├─┬ vue-router@4.1.6
│ └── vue@3.4.31 deduped
└─┬ vue@3.4.31
  └─┬ @vue/server-renderer@3.4.31
    └── vue@3.4.31 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