Cuando pongo un texto en la búsqueda y hago clic en el botón para mostrar una nueva vista para el resultado de la búsqueda, obtengo dos páginas iguales. Entonces, por ejemplo, cuando AMZN , voy a la página de stocks/AMZN , pero cuando presiono "atrás", se carga la misma página stocks/AMZN . Cuando hago clic en "atrás" una vez más, vuelvo a mi página inicial.

¿Cómo puedo hacer que solo se renderice una página?

Estoy usando Vue, y aquí está mi código.

A continuación se muestra la parte del script de mi archivo .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} }) },

Y debajo está mi parte html de mi archivo .vue:

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