Vue：NavigationDuplicated：避免了对当前位置的冗余导航，但需要重新加载页面

Question

我有这个 Hashtag.vue 对象：

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

点击后需要跳转到

http://localhost:8080/hashtag/text

它会在那里显示带有此主题标签的文章。

这些文章还包含其他主题标签。但是当我在该页面上并单击其他一些标签时，我得到了

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

错误。并且页面上的文章保持不变（对于旧标签）。

如何让它重新加载页面？

目前/hashtag/text页面上的文章是这样加载的：

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: []
    }
  }
}

Answer 1

一种解决方法是在路由查询中添加时间戳

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