时间戳

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

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

问题描述

我有这个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: []
    }
  }
}

标签： javascriptvue.jsvuejs2

解决方案

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

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

推荐阅读