Vue.js 2.5中如何为按钮绑定href？传统超链接绑定正常

按钮本身没有原生的href属性，这就是你直接用v-bind:href没效果的核心原因~ 给你两个实用的解决方案：

方案1：用<a>标签模拟按钮 #

如果你只是想要按钮的外观+链接的功能，最直接的方式是用<a>标签，通过CSS把它样式改成按钮的样子，这样就能正常使用v-bind:href了：

<a v-bind:href="'link.html#/'+$route.params.year+'/12/regulatory?l=something'" class="btn-style">My Link</a>

你可以自定义.btn-style类的样式，比如设置背景色、边框、内边距这些，让它看起来和原生按钮一模一样。

方案2：给按钮绑定点击事件实现跳转 #

如果必须用<button>标签，那就通过点击事件来触发导航逻辑，分两种场景处理：

跳转到外部链接（非Vue Router路由） #

直接修改window.location.href即可：

<button @click="navigateToLink">My Link</button>

在Vue实例的methods里添加对应方法：

new Vue({
  // ...其他配置项
  methods: {
    navigateToLink() {
      const targetUrl = `link.html#/${this.$route.params.year}/12/regulatory?l=something`;
      window.location.href = targetUrl;
    }
  }
})

跳转到Vue Router内部路由 #

如果你的链接是Vue Router管理的内部路由，更推荐用$router.push方法（符合Vue路由的设计逻辑）：

methods: {
  navigateToLink() {
    this.$router.push({
      path: `/${this.$route.params.year}/12/regulatory`,
      query: { l: 'something' }
    });
  }
}

这样就能完美实现按钮点击跳转的需求啦~

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