Vue3组合式API+TS中RouterLink的to属性绑定及Props类型配置

1. 正确为linkPath指定RouteLocationRaw类型 #

在Vue 3的<script setup lang="ts">中，RouteLocationRaw是TypeScript类型而非运行时值，需通过类型导入和defineProps的类型参数语法声明，避免把类型当作值使用：

<script setup lang="ts">
import type { RouteLocationRaw } from 'vue-router'
import { RouterLink } from 'vue-router'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

// 用类型参数声明props，获得完整TS类型校验
const props = defineProps<{
  linkPath: RouteLocationRaw
  label?: string // 可选属性添加?标记
  icon?: string
}>()

// 如需设置默认值，结合withDefaults使用
// const props = withDefaults(defineProps<{
//   linkPath: RouteLocationRaw
//   label?: string
//   icon?: string
// }>(), {
//   label: '',
//   icon: ''
// })
</script>

<template>
  <RouterLink :to="linkPath">
    <FontAwesomeIcon :icon="icon" size="2xl" /> 
    <span class="hidden">{{ label }}</span>
  </RouterLink>
</template>

若坚持使用运行时props声明（不推荐TS场景），可通过validator做运行时校验，同时用JSDoc补充类型提示：

<script setup lang="ts">
import type { RouteLocationRaw } from 'vue-router'
import { RouterLink } from 'vue-router'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

const props = defineProps({
  linkPath: {
    required: true,
    /** @type {RouteLocationRaw} */
    validator: (value: unknown): value is RouteLocationRaw => {
      return typeof value === 'string' || (typeof value === 'object' && value !== null)
    }
  },
  label: String,
  icon: String
})
</script>

2. 向组件传递props数据 #

在父组件中直接通过组件标签属性传递即可，linkPath支持两种格式：

• 字符串路径（直接传字面量）
• 路由对象（需加:做动态绑定，支持命名路由、参数等）

示例：

<!-- 父组件代码 -->
<template>
  <!-- 传递字符串路径 -->
  <NavLink 
    linkPath="/dashboard" 
    label="控制台" 
    icon="gauge"
  />

  <!-- 传递路由对象（推荐配合命名路由使用） -->
  <NavLink 
    :linkPath="{ name: 'UserProfile', params: { id: 123 } }" 
    label="个人中心" 
    icon="user"
  />
</template>

<script setup lang="ts">
import NavLink from './NavLink.vue'
</script>

3. 是否需要用router.push()替代RouterLink？ #

不需要。RouterLink是Vue Router专为导航链接设计的组件，会自动渲染为<a>标签，自带路由激活状态标识、预加载等特性，是声明式导航的最佳实践。

router.push()属于编程式导航，适合在逻辑判断触发跳转的场景使用（如表单提交后跳转），静态导航链接用RouterLink更合适。

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