【问题标题】：Vue.js 2.0 router link in a div component一个 div 组件中的 Vue.js 2.0 路由器链接
【发布时间】：2017-05-01 07:12:54
【问题描述】：

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

这显然不再起作用了。

【问题讨论】：

【解决方案1】：

Vue.js 3

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

改为使用v-slot，例如：

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

CSS：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

好吧，router-link 有一个 tag 属性。你正在寻找这个：

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

【讨论】：