如何通过 <router-link/> 将 props 传递给命名视图在 vuejs 中? [英] How to pass props to named views through <router-link /> in vuejs?

问题描述

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

它最初使用 .我的组件调用一个道具id"，我的视图，命名为 club 有参数 props:true;

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

mode: 'history',基础:process.env.BASE_URL，linkExactActiveClass: 'is-active',路线:[{小路: '/'，name: '俱乐部',成分: {内容:俱乐部}},{路径:'/club/:id',name: '俱乐部',道具:真实，成分: {内容:俱乐部}}]})

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

我错过了什么吗?

附件 1附件 2

解决方案

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

组件:{内容:俱乐部},道具: {内容:真实}

我在文档中找不到对此的正确解释，但它确实在此处的示例中起作用:

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

请注意代码示例中隐藏的以下注释:

//对于带有命名视图的路由，你必须为每个命名视图定义 `props` 选项:

I’m new to VueJS and front end development. I’m looking to pass a props (in this case, my club’s id) to my component/view.

It was initially working with <router-link :to="{ name: 'club', params: {id: club.id } }">. My component call a props "id", and my view, named club has the parameter props:true;

Fast forward a little later, i had to add named view. (I only added one for now - but i’ll have a view content and one nav).

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
      }
    }
  ]
})

And this broke everything. In the Vue extension, i can see that my send is sending my props as a param (see attachement 1), but once on the view, the id is undefined (see attachment 2).

Am i missing anything?

Attachement 1

Attachement 2

解决方案

You'd need to set a props value for each named view in that case. e.g.

components: {
  content: Club
},
props: {
  content: true
}

I can't find a decent explanation of this in the documentation but it does feature in an example here:

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

Note the following comment lurking in the code example:

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

这篇关于如何通过 <router-link/> 将 props 传递给命名视图在 vuejs 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！