Vue中通过Props为router-link动态设置Ion Button链接的问题

你的问题核心是Vue动态属性绑定的语法错误：:to是v-bind指令，内部需要写合法的JavaScript表达式，而你用了$/+ {{subLink1}}这种混合插值语法，这在属性绑定里是不允许的，导致路由链接解析失败，最终页面空白。

修正步骤 #

1. 修复:to的绑定语法
   把错误的绑定方式替换成以下两种合法写法之一：

   • 用ES6模板字符串（推荐）：

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

   • 用字符串拼接：

     <ion-button router-link :to="'/'+subLink1">{{ linkName1 }}</ion-button>
     

2. 确认Props定义的正确性
   确保子组件的Props声明规范，避免类型或必填项错误：

   export default {
     props: {
       subLink1: {
         type: String,
         required: true
       },
       linkName1: {
         type: String,
         required: true
       }
     }
   }
   

3. 排查其他可能导致空白的问题

   • 检查父组件传入的Props是否拼写正确（Vue Props大小写敏感，若父组件用kebab-case，需写为sub-link1="sale"）
   • 确认路由配置中存在/sale对应的路由组件，否则即使链接正确，跳转后也会显示空白
   • 打开浏览器控制台，查看是否有Props类型不匹配、路由未找到等报错信息，快速定位问题

内容的提问来源于stack exchange，提问作者micheal