Vue组件传参异常：UserSettingsComponent中router-link缺失slug参数报错

问题场景 #

我有ProfileComponent和UserSettingsComponent两个组件，都引入了NavbarComponent并传递user数据：

<NavbarComponent :user="user"></NavbarComponent>

NavbarComponent里有个带slug参数的路由链接：

<router-link :to="{ name: 'user.page', params: { slug: user.slug }}">Home</router-link>

在ProfileComponent页面一切正常，但进入UserSettingsComponent时会报错：

Uncaught (in promise) Error: Missing required param "slug"

注释掉路由链接后，直接渲染{{user.slug}}能正常显示值，但恢复路由链接就会报错。

核心原因 #

路由链接的to属性会在组件初始化阶段就被Vue Router解析，而UserSettingsComponent里的user数据大概率是异步加载的（比如从接口请求获取），导致NavbarComponent初始化时user还未完成赋值，此时user.slug是undefined，触发了路由参数缺失的报错。虽然后续user加载完成后能正常渲染{{user.slug}}，但路由链接的初始解析已经抛出了错误。

解决办法 #

1. 给路由链接加条件渲染，确保参数存在再渲染 #

通过v-if判断user和slug是否存在，避免初始化时解析无效的路由参数：

<ul class="nav me-auto">
  <li class="nav-item">
    <router-link 
      v-if="user?.slug" 
      :to="{ name: 'user.page', params: { slug: user.slug }}"
    >Home</router-link>
  </li>
  {{user.slug}} 
</ul>

这里用可选链操作符?.避免user为undefined时的报错。

2. 用计算属性封装路由配置，处理空值 #

通过计算属性动态生成路由配置，确保参数合法：

<script setup>
import { computed } from 'vue'
const props = defineProps(['user'])

// 封装路由链接配置
const homeRoute = computed(() => {
  return {
    name: 'user.page',
    params: { slug: props.user?.slug || '' }
  }
})
</script>

<template>
  <ul class="nav me-auto">
    <li class="nav-item">
      <router-link v-if="user?.slug" :to="homeRoute">Home</router-link>
    </li>
    {{user.slug}} 
  </ul>
</template>

3. 调整UserSettingsComponent中user的赋值时机 #

如果user是通过异步请求获取的，可以在请求完成后再渲染NavbarComponent：

<!-- UserSettingsComponent.vue -->
<template>
  <div v-if="user">
    <NavbarComponent :user="user"></NavbarComponent>
    <!-- 其他页面内容 -->
  </div>
  <div v-else>加载中...</div>
</template>

内容的提问来源于stack exchange，提问作者ШайтанЯкубович