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加载如下：

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

Answer 1

解决方法之一是为路由查询添加时间戳

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