Ionic Vue中router-link无法解析变量参数的问题求助

问题原因 #

直接在router-link属性中写{{ debt.id }}属于静态字符串写法，Vue不会解析其中的插值表达式，只会把它当作文本内容处理。

修复方案 #

有两种可行的写法：

1. 使用模板字符串绑定路径

通过v-bind（缩写为:）绑定router-link，用ES6模板字符串拼接变量：

<ion-item-option :router-link="`/debtAddEdit/edit/${debt.id}`">edit</ion-item-option>

2. 使用路由对象（推荐）

更规范的做法是利用Vue Router的命名路由和参数对象，这种方式更易维护，尤其适合复杂路由场景：
首先确保你的路由配置中定义了命名路由：

// 路由配置文件示例
const routes = [
  // ...其他路由
  {
    path: '/debtAddEdit/edit/:id',
    name: 'DebtAddEdit', // 命名路由
    component: () => import('../views/DebtAddEdit.vue') // 对应组件
  }
]

然后在组件中绑定路由对象：

<ion-item-option :router-link="{ name: 'DebtAddEdit', params: { id: debt.id } }">edit</ion-item-option>

验证 #

修改后，debt.id会被正确解析为变量值，点击选项时会跳转到带对应ID的编辑页面。

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