CODEWITHSUNDEEP
javascriptvue.jsvuejs2
parsecer
parsecer

Reputation: 5106

Vue: NavigationDuplicated: Avoided redundant navigation to current location but need to reload page

I have this Hashtag.vue object:

<template>
  <div   v-on:click="clicked">
  <div
               class="tag rounded-full p-2   ">
    {{text}}</div>
  </div>
</template>


<script>
export default {
  props: {
    text: {
      type: String
    },
    date:  {
      type: String
    },
    link: {
      type: String,

    }
  },
  created()  {
    console.log("this link: " + this.link);
  },
  methods:  {
    clicked()  {

      this.$router.push({
        path: this.getTo
      })
    }
  },
  computed:  {
    getTo: function()  {
      console.log("text: " + this.text);
      console.log("link: " + "hashtag/" + this.text);
      return "/hashtag/" + this.text;
    }
  }
}
</script>

When it's clicked it needs to go to

http://localhost:8080/hashtag/text

It goes there and displays articles with this hashtags.

Those articles contain other hashtags as well. But when I'm on that page and click on some other hashtag I get

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/hashtag/no".

error. And the articles on the page stay the same (for the old hashtag).

How do I get it to reload the page?

As of now the articles on the /hashtag/text page are loaded like this:

export default {
  components: {ArticleList},
  created()  {
    console.log("getAllArticles method");
    const response = ArticleService.getArticlesByTag(this.$route.params.tag).then((response) =>  {
      console.log("articles res: " + JSON.stringify(response));

      this.articles = response.data.articles;
      console.log("changed articles: " + JSON.stringify(this.articles));
    })
  },
  data()  {
    return {
      articles: []
    }
  }
}

Upvotes: 1

Views: 3179

Answers (1)

Jogiter
Jogiter

Reputation: 106

one way to fix is to add a timestamp to route`query

methods:  {
    clicked()  {
      this.$router.push({
        path: this.getTo,
        query: { timestamp: Date.now() } // changes every time when clicked called
      })
    }
  },

Upvotes: 6

Related Questions