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

Question

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

当我按下按钮时，我希望它将我引导至所需的页面。

Answer 1

您可以使用 tag prop.

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

请use v-slot if you use 3.0+ (thanks to and )

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

现在 (VueJS >= 2.x) 你会做：

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

Answer 4

我正在使用 Vue CLI 2，这个对我有用！

<router-link to="/about-creator">
<button>About Creator</button>
</router-link>

Answer 5

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

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

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

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

Answer 6

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

截至 2022 年的官方答复

使用插槽 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>

如果您认为这是unintuitive/verbose，请投诉over here

为什么其他答案有问题？

@choasia 的回答（使用标签 prop）已被弃用，不允许将 props 传递给组件
@Badacadabra 的回答会导致 CSS 出现问题，尤其是当按钮来自库时（例如：添加边距或定位）

Answer 8

Routing methods using method as well routing 1. Router link

<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');
        }
    }
}

Answer 9

使用 bootstrap-vue 并在 table 行内创建一个带有 id 的 link 的示例：

<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 分别是列名称和 table 内容。

Answer 10

    // 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' } })

Answer 11

使用 v-btn 组件，您可以简单地：

<v-btn onclick="location.href='https://www.Google.com'" type="button" class="mb-4">Google</v-btn>

Answer 12

遗憾的是不，目前没有办法正确。

我说正确是因为显然已经针对这个问题提出了几种解决方案。问题是：它们 似乎有效 但实际上它们 不正确 。

原因如下：

在 html 中将任何可操作元素放入另一个元素中是无效的（那里有很多无效的 html 而且它还没有着火，我是对的？).
我在这里看到的大多数解决方案都不提供任何导航辅助功能（也不提供 link 功能，例如“在新选项卡中打开 link”）。
这样做的（杰夫海金）也有一些缺点：
- 未能观察到点 1)
- 在他的代码片段中，@click="navigate" 不是必需的，因为 <router-link> 实际上是一个 <a>，它会自行触发导航，而 href 对<button>.
- 编辑：Badacadabra 的回答好一点，但仍然是第 1 点）

假设您想要重用样式正确的按钮组件以用作有效的可访问按钮组件link。

真正的解决方案，你不会喜欢它（我不喜欢），是为按钮创建一个组件，为 link 创建另一个组件，然后将任何可以重复使用的内容放在另一个文件中（例如，一个基本的可操作组件）。

如果按钮来自图书馆，好吧，另一个例子是图书馆永远不会真正为您解决所有问题。

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

Enclosing a router-link tag in a button in vuejs

button

vue.js

vue-router

截至 2022 年的官方答复

使用插槽的示例 api

为什么其他答案有问题？