javascript - 使用 Vue 渲染时加载相同的两个页面

Question

当我在搜索中添加一些文本并单击按钮以呈现搜索结果的新视图时，我得到两个相同的页面。例如，当我输入 时AMZN，我会转到stocks/AMZN页面，但是当我按“返回”时，stocks/AMZN会加载相同的页面。当我再次单击“返回”时，我回到了我的初始页面。

我怎样才能只渲染一页？

我正在使用 Vue，这是我的代码。

下面是我的 .vue 文件的脚本部分。

  data() {
    return {
      tickerSymbol: null,
      stock: {},
      summaryReadMore: false,
    };
  },
  created() {
    this.fetchProfile();
  },
  methods: {
    fetchProfile() {
      this.tickerSymbol = this.$route.params.symbol;
      axios.get(`${import.meta.env.VITE_SBT_PERFORMANCE_SERVICE_URL}/stocks/${this.tickerSymbol}`)
        .then(resp => { 
          this.stock = resp.data;
        });
    },
    redirectToNewProfile() {
      this.$router.push({ name: 'Stocks', params: {symbol: this.$refs.searchItem.value} })
    },

下面是我的 .vue 文件的 html 部分：

      <form v-on:submit="redirectToNewProfile()">
        <div class="shadow flex">
          <input class="w-full rounded p-2" type="text" placeholder="Search..." ref="searchItem"
          v-on:keyup.enter.prevent="redirectToNewProfile()">
          <button class="bg-white w-auto flex justify-end items-center text-blue-500 p-2 hover:text-blue-400">
              <i class="material-icons">search</i>
          </button>
        </div>
      </form>

标签： javascripthtmlvue.jsvue-router