Vue项目中使用path配置router-link跳转UserDetail页面的问题

你遇到的问题很典型——跳转时错误地把路由配置里的占位符:user_id直接写进了path里，导致路由把它当成了字面量路径，所以才会出现截图里那种带占位符的链接。

要通过path方式实现跳转到UserDetail页面，你需要直接把参数值拼接进path中，而不是保留占位符。这里有两种常用的正确写法：

写法1：使用模板字符串直接拼接路径 #

这是最直观的方式，直接把user.id拼到基础路径/users/后面：

<td><router-link :to="`/users/${user.id}`">{{user.name}}</router-link></td>

写法2：使用对象形式的path（同样需要拼接参数） #

如果你习惯用对象格式的to属性，也可以这样写，本质和上面一致：

<td><router-link :to="{ path: `/users/${user.id}` }">{{user.name}}</router-link></td>

为什么之前的写法不对？ #

你之前的代码里写了path: 'users/:user_id'，这里的:user_id是路由配置里用来匹配动态参数的规则占位符，不是实际跳转时要写的路径内容。Vue Router看到这个字面量路径后，不会去替换params里的值，而是直接把users/:user_id作为目标路径，这就导致了截图里的错误显示。

另外要注意：Vue Router中如果使用path属性跳转，params会被忽略，所以你之前写的params: {user_id: user.id}其实是不起作用的——这也是为什么必须直接把参数拼进path里的原因。

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