在vuejs的按钮中包含一个router-link标签

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

当我按下按钮时，我希望它将我路由到所需的页面。

您可以使用tagprop。

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

尽管这里的答案都不错，但似乎没有一个是最简单的解决方案。经过一些快速研究，似乎使用vue-router制作按钮的最简单方法是router.push调用。可以在.vue模板中使用它，如下所示：

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

超级简单干净。我希望其他人觉得这有用！

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

@choasia的答案是正确的。

或者，您可以将button标签包装在标签中，router-link如下所示：

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

这不是很干净，因为您的按钮将位于l​​ink元素（<a>）内。但是，这样做的好处是您可以完全控制按钮，如果使用Bootstrap之类的前端框架，则可能需要这样做。

老实说，我从未在按钮上使用过这种技术。但是我经常在div上执行此操作...

现在，几天（VueJS> = 2.x）您将要做：

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

感谢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

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

@choasia的答案不允许将道具传递给组件
@Badacadabra的答案导致库按钮出现问题（例如按钮边距）

这是解决方案与广告位API配合使用的方式

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

使用方法以及路由的路由方法1.路由器链接

<router-link to="/login">Login </router-link>

2. 当点击按钮时，键入呼叫另一条路线。

<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>

使用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分别是列名和表内容。