私はこのようなカードの配列を持っています
<nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
<a :href="card.link>Go to href</a>
</nuxt-link>
_
nuxt-Linkを使用してカードをクリックすると、カードの詳細が表示されているページを開く必要があります。
hREFをクリックすると、外部サイトを開く必要があります
しかし、私がa-hrefをクリックすると、その開いた詳細を無視して
ヌークスリンクのタグを使用したが、役立たない
現時点では私のために働くようです
親コンポーネントで
<template>
<ul
v-if="loadedTertiaryMenu"
class="nav justify-content-end"
>
<li
v-for="item in loadedTertiaryMenu"
:key="item.id"
class="nav-item"
>
<NavLink
:attributes="item"
/>
</li>
</ul>
</template>
<script>
import NavLink from '@/components/Navigation/NavLink'
export default {
name: 'TheNavigationTertiary',
computed: {
loadedTertiaryMenu() {
return this.$store.getters.loadedTertiaryMenu
}
},
components: {
NavLink
}
}
</script>
<style scoped lang="scss">
</style>
_
子成分で
<template>
<component
v-bind="linkProps(attributes.path)"
:is="NavLink"
:title="attributes.title"
:class="[ attributes.cssClasses ]"
class="nav-link active"
aria-current="page"
>
{{ attributes.label }}
</component>
</template>
<script>
export default {
name: 'NavLink',
props: {
attributes: {
type: Object,
required: true
}
},
methods: {
linkProps (path) {
if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') {
return {
is: 'a',
href: path,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'nuxt-link',
to: path
}
}
}
}
</script>
<style scoped lang="scss">
</style>
_