如何将数据值传入链接？Vue Router场景下按钮href赋值问题

根据你的Vue Router配置和需求，有两种推荐的方式来实现按钮的跳转链接赋值，避免硬编码路径带来的问题：

方式1：使用Bootstrap Vue按钮的to属性（推荐） #

Bootstrap Vue的<b-button>组件原生支持Vue Router的路由跳转，直接用:to绑定路由对象即可，这是单页应用里最优的实现方式，不会触发页面刷新：

<td>{{ page.url }}</td>
<td>
  <b-button :to="{ name: 'wiki', params: { id: page.url } }" variant="primary">View</b-button>
</td>

说明： #

• 你定义的路由name为wiki，参数是id，所以我们通过params把page.url作为id的值传入
• Vue Router会自动根据你的路由规则（path: '/:id'）生成正确的URL，比如当page.url为article123时，跳转路径会是/article123
• 这种方式完全遵循Vue Router的单页路由机制，用户体验更流畅

方式2：手动生成href路径（不推荐） #

如果因为特殊场景必须使用href属性，可以通过$router.resolve方法解析路由配置生成对应的URL字符串：

<td>{{ page.url }}</td>
<td>
  <b-button :href="$router.resolve({ name: 'wiki', params: { id: page.url } }).href" variant="primary">View</b-button>
</td>

说明： #

• $router.resolve会根据传入的路由对象（name和params）解析出完整的URL
• 这种方式虽然能生成正确的href，但会触发浏览器的页面跳转（刷新），不符合单页应用的设计理念，所以优先推荐方式1

注意点 #

别再用硬编码的#wiki/{{page.url}}了，你的路由路径是/:id而非/wiki/:id，硬编码会导致路径不匹配；同时通过路由name和params的方式，后续如果修改路由路径，不需要改动按钮的跳转代码，可维护性更强。

内容的提问来源于stack exchange，提问作者James A Mohler