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