在 vue 中为路由器链接使用 prop 数据

Question

我正在尝试创建一个组件，该组件将根据传入的道具动态更改离子按钮上的链接。

我有

<template>
<ion-button router-link :to "`$/+ {{subLink1}}" shape="round">{{linkName1}}</ion-button>
</template>

<script>
import{IonButton} from '@ionic/vue'
export default{
props:{subLink1:{required:true},linkName1:{required:true}}
}
</script>

从父级传入的道具是例如subLink1: "销售", linkName1: "销售"

但是，控制台返回的是我传入的空白，所以我想问题出在我的路由器链接中？

Answer 1

设置 href 属性；

<template>
    <ion-button :href="`/${subLink1}`" shape="round">{{linkName1}}</ion-button>
</template>

<script>
import { IonButton } from '@ionic/vue'
export default{
    props: {
        subLink1:{
            required: true
        },
        linkName1: {
            required: true
        }
    }
}
</script>