在nuxt模板中使用nuxt-link的SEO问题

时间:2020-02-15 15:28:07

标签: vue.js seo nuxt.js

我有一张需要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链接中出现默认设置?

2 个答案:

答案 0 :(得分:0)

我找到了解决方法:

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

然后我添加此方法:

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

答案 1 :(得分:0)

提示:您也可以执行@click.native.prevent="fuga"。然后不再需要e.preventDefault();;)