web-dev-qa-db-fra.com

Comment ajoutez un href à l'intérieur de NUXT-LINK?

J'ai un tableau de cartes comme celle-ci

<nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
  <a :href="card.link>Go to href</a>
</nuxt-link>

cliquez sur la carte avec NUXT-Link si la page d'ouverture avec les détails de la carte

cliquez sur un HREF devrait ouvrir le site externe

mais quand je clique sur A-href ses détails ouverts et ignorant A-href

essayé d'utiliser des tags pour NUXT-LINK, mais pas aidé

vue.jsvue-routernuxt.js
6
Remi Fokz

Cela semble fonctionner pour moi en ce moment

Composant parent

 <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>

dans le composant enfant

<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>
0
Arlan T