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 redirect to
http://localhost:8080/hashtag/text
It navigates there and displays articles with the specified hashtags.
These articles may contain additional hashtags. However, if I click on a different hashtag while on that page, I encounter:
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/hashtag/no".
error. The displayed articles remain the same (for the previous hashtag).
How can I force the page to reload?
Currently, the articles on the /hashtag/text page are loaded as follows:
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: []
}
}
}