将图像作为道具传递给路由器链接标签

【问题标题】：Pass an image as prop in a router-link tag将图像作为道具传递给路由器链接标签
【发布时间】：2018-12-15 19:50:11
【问题描述】：

如何在 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>

【问题讨论】：

为什么你需要通过你的路由器标签传递一个道具？你的用例是什么？
我有一个包含项目列表的页面，当我按下特定项目时，它会将我重定向到另一个包含一些文本和图像的组件，我想动态更改该图像我的标签。

标签： vue.js

【解决方案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-for 。

或如果你命名你的路线，你可以像这样传递一个参数：

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

【讨论】：