vue 3中params router-link的绑定值如何？答案

【问题标题】：how binding value on params router-link in vue 3?vue 3中params router-link的绑定值如何？
【发布时间】：2022-01-25 07:19:40
【问题描述】：

您好，很抱歉我的菜鸟问题。我需要路由链接的绑定参数值。我搜索了很多，我认为我的代码是正确的，但不起作用。

<router-link :to="{name: 'registro-new', params: {id: cliente.id}}">registro </router-link>

这是 console.log 中的错误

[Vue warn]: Unhandled error during execution of setup function 
  at <RouterLink to= 
Object { name: "registro-new", params: {…} }

name: "registro-new"

params: Object { id: undefined }

<prototype>: Object { … }
 > 
  at <Cliente onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <Dashboard onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView key="/cliente/1" > 
  at <App> runtime-core.esm-bundler.js:6873:16

我认为 cliente.id 为空，但如果我在 div 中写入 {{cliente.id}}，我会得到值。

如果我手动输入这样的数字，我的路线工作

<router-link :to="{name: 'registro-new', params: {id:1}}">registro </router-link>

所以我真的不知道我的坏在哪里。有人可以帮帮我吗？

【问题讨论】：

cliente.id undefined ，不应该是

标签： vue.js vuejs3

【解决方案1】：

在渲染时似乎客户端 id 还没有可用，所以添加一个条件以在 id 准备好时渲染路由器链接 v-if="cliente.id" ：

<router-link v-if="cliente.id" :to="{name: 'registro-new', params: {id: cliente.id}}">
  registro 
</router-link>

【讨论】：

哦，现在可以了！多谢！你知道为什么会这样吗？我在安装中检索客户，最好在设置中执行？
客户端数据是异步加载的（一段时间后），您可以将操作保留在mounted hook中并在模板中添加条件