【发布时间】：2018-01-20 03:37:07
【问题描述】：
我可以在button 标记中包装或包含router-link 标记吗？
当我按下按钮时，我希望它引导我到所需的页面。
【问题讨论】：
-
对于 2019 年和 Vue Router 3.1.0+ 的答案，向下滚动以获取最新答案stackoverflow.com/a/58495529/90674
标签： button vue.js vue-router
【发布时间】：2018-01-20 03:37:07
【问题描述】：
您可以使用tag prop。
<router-link to="/foo" tag="button">foo</router-link>
【讨论】：
-
如果该按钮接受一些道具怎么办？如何传递出去？
-
@andcl 我有同样的问题，我在下面发布了答案，这是 GitHub 上的 Vue-Router 团队告诉我的：github.com/vuejs/vue-router/issues/3003
-
在我已经这样做了将近一年之后，我试图对此进行投票！ akkk 再次感谢
虽然这里的答案都很好，但似乎没有一个是最简单的解决方案。经过一些快速研究，似乎使按钮使用 vue-router 的真正最简单的方法是使用 router.push 调用。这可以在 .vue 模板中使用，如下所示：
<button @click="$router.push('about')">Click to Navigate</button>
超级简单干净。我希望其他人觉得这很有用！
来源：https://router.vuejs.org/guide/essentials/navigation.html
【讨论】：
-
好的，谢谢！这是最简单的，而且效果很好。而且我可以根据自己的选择设置按钮样式。如果你需要使用 params，你也可以这样做：
-
对我来说最好的答案
-
请注意，此答案不允许使用浏览器支持的功能，例如按 Ctrl+单击在新选项卡中打开链接或在浏览器窗口左下角预览链接。
@choasia的回答是正确的。
或者，您可以将button 标签包装在router-link 标签中，如下所示：
<router-link :to="{name: 'myRoute'}">
<button id="myButton" class="foo bar">Go!</button>
</router-link>
这不是很干净，因为您的按钮将位于链接元素 (<a>) 内。但是，优点是您可以完全控制按钮，如果您使用像 Bootstrap 这样的前端框架，这可能是必要的。
说实话，我从来没有在按钮上使用过这种技术。但我经常在 div 上这样做......
【讨论】：
-
另外，可以在
中指定 tag="span"，这样它就不会应用 样式，从而可以更好地控制外观： -
但是按钮中的文字（例如您的示例中的“Go！”）将带有蓝色下划线，这并不漂亮...
-
即使使用像 Bootstrap 这样的框架，这也几乎没有必要，因为您可以在 router-link 标记中包含类等标准属性，这些属性将应用于呈现的元素，甚至是按钮，当你使用 tag="button":
感谢 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
【讨论】：
截至 2021 年的官方答复
使用插槽 api Documentation Here
使用插槽 api 的示例
<router-link
to="/about"
v-slot="{href, route, navigate}"
>
<button :href="href" @click="navigate" class='whatever-you-want'>
{{ route.name }}
</button>
</router-link>
如果您认为这不直观/冗长，请投诉over here
为什么其他答案有问题？
-
@choasia 的回答（使用标签 prop）已被弃用，并且不允许将 props 传递给组件
-
@Badacadabra 的回答会导致 CSS 出现问题，特别是如果按钮来自库（例如：添加边距或定位）
【讨论】：
-
如果您的版本不是 >= 3.1.0，插槽中的项目将被忽略，不会显示任何错误。文档链接：router.vuejs.org/api/#v-slot-api-3-1-0
-
我无法下载 3.1.0 它说最新的是 3.0.0 rc
-
不是 Vue 3.1.0，是 vue-router 3.1.0。
-
感谢@Anuga，修复它?感谢@sshow，文档已链接。
现在 (VueJS >= 2.x) 你会这样做：
<router-link tag="button" class="myClass" id="button" :to="place.to.go">Go!</router-link>
【讨论】：
使用方法的路由方法以及路由 1.路由器链接
<router-link to="/login">Login </router-link>
- 单击该类型的按钮时，将调用另一条路线。
<template> <input type="submit" value="Login" @click="onLogIn" class="btn float-right btn-primary"> </template>
<script>
export default {
name:'auth',
data() {
return {}
},
methods: {
onLogIn() {
this.$router.replace('/dashboard');
}
}
}
【讨论】：
我正在开发 Vue CLI 2，这个对我有用！
<router-link to="/about-creator">
<button>About Creator</button>
</router-link>
【讨论】：
// literal string path
router.push('home')
// object
router.push({ path: 'home' })
// named route
router.push({ name: 'user', params: { userId: '123' } })
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })
【讨论】：
使用 v-btn 组件，您可以简单地：
<v-btn onclick="location.href='https://www.Google.com'" type="button" class="mb-4">Google</v-btn>
【讨论】：
使用 bootstrap-vue 并在表格行内创建带有 id 的链接的示例：
<b-table :fields="fields" :items="items">
<template v-slot:cell(action)="data">
<router-link :to="`/rounds/${data.item.id}`" v-slot="{ href, route, navigate}">
<b-button :href="href" @click="navigate" color="primary" style="text">{{ data.item.id }}</b-button>
</router-link>
</template>
</b-table>
其中fields 和items 分别是列名和表格内容。
【讨论】：