Vue.js 2.0 路由器 link 在 div 组件中

Question

我可以 link 在 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>

方式 2

<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属性is no more

相反，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'ing 手形鼠标光标

CSS:

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

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