将路由器链接标记包含在vuejs中的按钮中

Question

我可以在router-link标签中包装或附加button标签吗？

当我按下按钮时,我希望它将我转到所需的页面.

Answer 1

你可以使用tag道具.

<router-link to="/foo" tag="button">foo</router-link>

Answer 2

@choasia的回答是正确的.

或者,您可以将button标记包装在标记中,router-link如下所示:

<router-link :to="{name: 'myRoute'}">
  <button id="myButton" class="foo bar">Go!</button>
</router-link>

这不是那么干净,因为你的按钮将在一个link元素(<a>)内.但是,优点是您可以完全控制按钮,如果您使用Bootstrap等前端框架,则可能需要这样做.

说实话,我从未在按钮上使用过这种技术.但我经常在div上做这个...

Answer 3

虽然这里的答案都很好,但似乎没有一个是最简单的解决方案.经过一些快速的研究,似乎使按钮使用vue-router的真正最简单的方法就是router.push调用.这可以在.vue模板中使用,如下所示:

<button @click="$router.push('about')">Click to Navigate</button>

超级简单干净.我希望别人觉得这很有用!

来源:https://router.vuejs.org/guide/essentials/navigation.html

Answer 4

感谢 Wes Winder 的回答，并将其扩展为包含路由参数：

<button @click="$router.push({name: 'about-something', params: { id: 'abc123' },})">Click to Navigate</button>

并重申 Wes 提供的来源：https : //router.vuejs.org/guide/essentials/navigation.html

Answer 5

从 Vue-Router 3.1.0 开始，理想的方法是使用 slot api。
文档在这里

@choasia 的答案不允许将道具传递给组件
@Badacadabra 的答案会导致 CSS 问题，尤其是如果按钮来自库（例如：添加边距或定位）

以下是该解决方案如何与插槽 API 配合使用

<router-link
  to="/about"
  v-slot="{href, route, navigate}"
  >
    <button :href="href" @click="navigate" class='whatever-you-want'>
      {{ route.name }}
    </button>
</router-link>

Answer 6

现在几天(VueJS> = 2.x)你会做:

<router-link tag="button" class="myClass" id="button" :to="place.to.go">Go!</router-link>