CODEWITHSUNDEEP
vue-routernuxt.js
tlalco
tlalco

Reputation: 420

How can I prevent nuxt-link from modifying the path I set?

I have a post page in my nuxt application. On the side I have a newArticles component which shows a list of new articles. I want to be able to click on one of the new articles and navigate to it.

The url when you are on an article is article/{articleId}. However when I use nuxt-link :to="postLink", in which postLink is a computed property in the form of 'article/' + articleId, I get routed to articles/articles/{articleId} instead of article/{articleId}

I've been reading the vue router docs and I cant find a solution. I tried using exact and passing the name as a parameter but it doesn't seem to help.

Relvent Code:

<template>
  <div class="box">
    <article class="media">
      <nuxt-link 
        :to="postLink" 
        exact>
        <div class="media-left helper">
          <figure class="image is-96x96">
            <img
              :src="imageLink"
              class ="side-image"
              alt="Image">
          </figure>
        </div>
      </nuxt-link>
    </article>
  </div>
</template>

<script>

export default {
  name: 'SideArticle',
  props: {
    id: {
      type: String,
      required: true
    },
    more props....
  },
  computed: {
    imageLink() {
      return process.env.IMAGES_BASE_URL + JSON.parse(this.imagesurls)[0]
    },
    postLink() {
      return 'article/' + this.id
    }
  },
}
</script>

Upvotes: 1

Views: 868

Answers (1)

S.B
S.B

Reputation: 847

Have you tried prefixing a slash to the path?

Like so:

postLink() {
    return '/article/' + this.id
}

Upvotes: 3

Related Questions