Question

如何在vue-router标签中将图像作为prop传递？我有：

 <router-link :to="{path: '/details', query: { 
            name: 'item', 
            //...
          }}">
 </routerlink

在“详细信息”组件中，我有：

<template>
<img :src="url">
</template>

<script>
export default {
  name:'child-img',
   props:['url'],
    data() {
        return {

        }
    }
}
</script>

Answer 1

这是将道具传递到您的路线的情况，您必须在路由器中进行设置。

const router = new VueRouter({
  routes: [
    { path: '/details/:url', component: Details, props: true },
    // ...
  ]
})

然后，当您使用路线时：

<router-link to="`/details/${url}`">Details</router-link>

在上面的url中是您要传递给它的动态元素。如果来自v-for循环，则为item.url或您要进行v-foring的任何内容。

或，如果您命名路线，则可以通过这样的参数：

const router = new VueRouter({
  routes: [
    { path: '/details/:url', name: 'Details', component: Details, props: true },
    // ...
  ]
})

然后像这样使用它：

<router-link :to="{ name: 'Details', params: { url } }">
   Details
</router-link>

您可以阅读更多here

将图像作为道具传递到router-link标签中

1 个答案: