div组件中的Vue.js 2.0路由器链接

Question

我可以这样链接vue.js 2.0:

<router-link to="home">Home</router-link>

这将编译为a标记.但是我如何用div做到这一点？

随着vue.js 1.0我做了这样的:

<div v-link="{ name: 'Messages', params: { topic: topic.slug }}">test</div>

那显然不再适用了.

Answer 1

Vue 方式

如果你想<router-link>渲染为另一个标签，在你的情况下div，你可以使用tag prop来指定渲染到哪个标签，它仍然会监听点击事件进行导航。

<router-link to="home" tag="div">Home</router-link>

您也可以通过纯 HTML 方式之一执行此操作：

方式一

<a href="/home">
    <div>
        Home
    </div>
</a>

方式二

<div style="cursor: pointer;" onclick="window.location='/home';">
    Home
</div>

您还可以通过 vue 方式修改第二种方式，如下所示：

<div style="cursor: pointer;" @click="redirectToHome">
    Home
</div>

您可以在其中定义redirectToHome方法如下：

methods: {
  redirectToHome () {
     this.$router.push(
        {
          path: '/home',
        }
     )
 },

Answer 2

好吧,router-link有一个tag道具.你在找这个:

<router-link to="home" tag="div">Home</router-link>

Answer 3

Vue.js 3

免责声明：问题是关于 Vue.js 2 的。我看到了。

• tag属性已经没有了

相反，请执行v-slot以下操作：

<router-link to="/about" custom v-slot="{ navigate }">
  <div role="link" @click="navigate">test</div>
</router-link>

• custom阻止创建a元素
• navigate是为 提供的功能div，用于激活导航
• role="link"是可访问性的东西（你可以省略它），但也可以用于 CSS 控制手形鼠标光标

CSS：

[role="link"]:hover {
  cursor: pointer;
}

人们也可以保留a保留，因为浏览器现在可以更好地处理display:block a，但那是另一回事了。