Vue3+TS项目中Toast组件路由链接的TypeScript类型定义疑问

你需要用Vue Router提供的RouteLocationRaw类型来定义internal_url，这是专门用于描述导航参数的类型，完全匹配你传入的{ name: ..., query: ... }这种格式。

修正后的TypeScript接口 #

首先修正你接口里的拼写错误（interal_url → internal_url），并替换为正确的类型：

import type { RouteLocationRaw } from 'vue-router';

export interface Toast {
  message: string;
  call_to_action: string;
  external_url?: string;
  internal_url?: RouteLocationRaw;
}

为什么之前的类型不适用 #

• RouteRecord：是路由配置文件中定义的路由记录类型，并非用于页面导航的参数类型，完全不匹配你的使用场景。
• RouteLocation：是路由解析后生成的完整路由对象，包含matched、fullPath等运行时自动生成的属性，而你传入的只是导航用的原始参数，缺少这些属性，所以会抛出类型错误。

组件模板优化建议 #

你的现有模板只处理了外部链接，需要区分内部/外部链接的渲染逻辑，确保内部路由用router-link触发跳转，外部链接用普通<a>标签：

<!-- 遍历toasts列表 -->
<div class="toast-item" v-for="toast in toasts" :key="toast.message">
  <p>{{ toast.message }}</p>
  <component
    :is="toast.internal_url ? 'router-link' : 'a'"
    class="my-button-class"
    :to="toast.internal_url"
    :href="toast.external_url"
    :target="toast.external_url ? '_blank' : undefined"
    rel="noopener noreferrer"
  >
    {{ toast.call_to_action }}
  </component>
</div>

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