如何在 vuejs 中通过 <router-link /> 将道具传递给命名视图？

Posted 2023-02-22

【中文标题】如何在 vuejs 中通过 <router-link /> 将道具传递给命名视图？

【英文标题】：How to pass props to named views through <router-link /> in vuejs?

【发布时间】：2020-01-08 11:04:04

【问题描述】：

我是 VueJS 和前端开发的新手。 我希望将道具（在本例中为我的俱乐部的 id）传递给我的组件/视图。

它最初与<router-link :to=" name: 'club', params: id: club.id "> 合作。 我的组件调用了一个道具“id”，而我的视图名为 club 有参数 props:true;

稍后快进，我不得不添加命名视图。 （我现在只添加了一个 - 但我会有一个视图内容和一个导航）。

mode: 'history',
  base: process.env.BASE_URL,
  linkExactActiveClass: 'is-active',
  routes: [
    
      path: '/',
      name: 'clubs',
      components: 
        content: Clubs
      
    ,
    
      path: '/club/:id',
      name: 'club',
      props: true,
      components: 
        content: Club
      
    
  ]
)

这打破了一切。 在 Vue 扩展中，我可以看到我的 send 正在将我的 props 作为参数发送（见附件 1），但是一旦在视图上，id 是未定义的（见附件 2）。

我错过了什么吗？

附件 1

附件 2

【参考方案1】：

在这种情况下，您需要为每个命名视图设置一个 props 值。例如

components: 
  content: Club
,
props: 
  content: true

我在文档中找不到对此的适当解释，但它确实在此处的示例中具有特色：

https://router.vuejs.org/guide/essentials/passing-props.html

请注意代码示例中潜伏的以下注释：

// for routes with named views, you have to define the `props` option for each named view:

【讨论】：

确实有效！谢谢@skirtle :) - 我几乎确定我在研究期间结束了这个文档页面并已经尝试过了，但此时我可能还有其他事情搞砸了:)