vue-codigos

vue-codigos copied to clipboard

Na parte 9.19 (Criando um Post - 183) e 10.2 (Visualizando o Post - 193) o < router-link > foi utilizado da seguinte forma

<footer class="card-footer">
    <a class="card-footer-item">
        <router-link :to="'/post/'+post.id">Ver Mais</router-link>
    </a> 
</footer>

Ao observar o que está sendo gerado, e ler a documentação do vue-router pude observar o seguinte trecho que descreve que um < router-link > sempre será renderizado como uma tag < a >

 <!-- use router-link component for navigation. -->
 <!-- specify the link by passing the `to` prop. -->
 <!-- `<router-link>` will be rendered as an `<a>` tag by default -->

isso gera uma renderização incorreta do HTML, ficando com um < a > dentro de outro, como pode ser observado abaixo

<footer data-v-8dc7cce2="" class="card-footer">
    <a data-v-8dc7cce2="" class="card-footer-item">
        <a data-v-8dc7cce2="" href="#/post/-XXXX" class="">Ver Mais</a>
    </a>
</footer>

a implementação correta pare esses trechos seria apenas

<footer class="card-footer">
    <router-link class="card-footer-item" :to="'/post/' + post.id">Ver mais</router-link>
</footer>

PS: versão das dependências

  "dependencies": {
    "bulma": "^0.6.1",
    "firebase": "^4.8.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuefire": "^1.4.5"
  },