nuxt 模板中带有 nuxt-link 的 SEO 问题答案

【问题标题】：SEO question with nuxt-link in a nuxt templatenuxt 模板中带有 nuxt-link 的 SEO 问题
【发布时间】：2020-02-15 15:28:07
【问题描述】：

我有一张卡片，如果需要 SEO，我需要将 nuxt 链接放在标题上，但整张卡片必须可以通过某种方法点击：

<template>
  <div @click.prevent="clickit(item)" >
    <img class="background" :src="item.backgroundImage" />
    <nuxt-link
      :to="'/road/' + item.id"
    >{{ item.text }}</nuxt-link>
    <img class="mask" :src="item.backgroundMask" />
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    clickit(item) {
      this.$router.push({
        path: "/road/" + item.id
      });
    }
  }
};
</script>

所以我确实喜欢这样，但问题是当我只点击标题时它会触发两个事件。有没有办法防止 nuxt 链接出现默认情况？

【问题讨论】：

为什么要使用 nuxt-link ？
只需使用nuxt-link作为所有的包装器
否，因为在客户端，nuxt-link 变成了一个.href 链接，并且它更好地让 seo 只在其中获取有意义的单词。

标签： vue.js seo nuxt.js

【解决方案1】：

我找到了解决方案：

 <nuxt-link
    :to="'/road/' + item.id"
     @click.native="fuga"
     event
     class="ititle"
 >{{road.name}}</nuxt-link>

然后我添加了这个方法：

fuga(e) {
  e.preventDefault();
}

【讨论】：

【解决方案2】：

专业提示：您也可以使用@click.native.prevent="fuga"。那么e.preventDefault(); 就不再需要了；）

【讨论】：