When I put some text on search and click on the button to render a new view for the search result, I get two same pages. So for example, when I type in AMZN, I go to the stocks/AMZN page, but when I press "back", the same stocks/AMZN page loads. When I click on "back" once more, then I am back to my initial page.

How can I make just one page to render?

I am using Vue, and here is my code.

Below is the script part of my .vue file.

  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} })
    },

And below is my html part of my .vue file:

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