Vue.js router-link动态链接问题：如何正确绑定路由参数？

问题根源 #

你直接把{{$route.params.id}}写在to属性的字符串里，Vue不会解析这种插值语法——因为to在这里是普通HTML属性，只有用v-bind（简写:）绑定的属性，Vue才会把里面的内容当成JavaScript表达式去解析，所以才会出现/{{$route.params.id}}/detail这种错误路径。

无需Script的修复方法 #

完全可以不用写script代码，直接在模板里修改就能解决，给你两种简单写法：

写法1：模板字符串绑定路径 #

用反引号包裹路径，直接嵌入$route.params.id，直观易懂：

<router-link :to="`/${$route.params.id}/detail`" class="btn btn-outline-primary">Add</router-link>

写法2：路由对象绑定（官方推荐） #

把to绑定成一个路由对象，path字段用模板字符串生成：

<router-link :to="{ path: `/${$route.params.id}/detail` }" class="btn btn-outline-primary">Add</router-link>

修复流程解释 #

1. 把原来的to="/{{$route.params.id}}/detail"改成:to="..."——:是v-bind的简写，告诉Vue这个属性值是动态的，需要解析里面的JS表达式。
2. 用模板字符串（反引号`）的方式，把$route.params.id嵌入到路径字符串中，这样Vue会自动把变量替换成当前路由的实际ID值（比如Books页面就会替换成/Books/detail）。

额外说明 #

如果你的路由配置了命名路由，还可以用更简洁的方式（比如通过name和params传递参数），但对于新手来说，上面两种写法已经足够解决问题，而且完全不需要写script代码。

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