在 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: "sale", linkName1: "Sales"

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

Answer 1

这样做：

<ion-button 
   :router-link="`/${subLink1}`" 
   router-direction="forward" 
   shape="round" 
   v-text="linkName1"
/>

RTM： https://ionicframework.com/docs/vue/navigation#navigating-using-router-link

Answer 2

设置 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>