Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.46k stars 478 forks source link

[Menu] 当项目不包含 vue-router 时,会产生额外的 warning #4718

Closed dsh0416 closed 1 day ago

dsh0416 commented 1 week ago

tdesign-vue-next 版本

1.10.3

重现链接

No response

重现步骤

  1. 初始化一个不含 vue-router 的项目
  2. 插入一个 Menu 元素(如下代码)
<template lang="pug">
t-layout
  t-header
    t-head-menu(v-model="activeRoute")
      t-menu-item(value="foo")
        | Foo
  t-layout
    t-aside Aside
    t-content
      slot
  t-footer Footer
</template>

<script lang="ts" setup>
import { ref } from "vue";

const activeRoute = ref("foo");
</script>

期望结果

正常使用

实际结果

报了如下 warning

[Vue warn]: Property "$router" was accessed during render but is not defined on instance. 

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

我们业务场景围绕 ruby on rails 和 inertia.js,所以不需要 vue-router 组件。现在情况会报 vue warn,虽然不影响使用,但满屏幕的 warning 挺影响调试的。

问题来自 https://github.com/Tencent/tdesign-vue-next/blob/af68adb029ce2e4b7bbbcd79ad24a8f03a13388f/src/menu/menu-item.tsx#L74 即使我不使用 RouterLink,此处也会 eagerly 初始化 router 变量。可以通过某种方法改成惰性的。

一个 workaround 是手动传入 menu-item(:router="{}")

github-actions[bot] commented 1 week ago

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