[DÚVIDA] Rota Dinâmica com NuxtJs
Estou fazendo um projeto de Ecommerce com Nuxtjs e Typescript, e até então não estava tendo problemas com página _slugs (páginas dinâmicas), mas quando resolvi implementar pesquisa no meu site, encontrei problemas que irei relatar a seguir (traduzi minha pergunta do StackOverFlow):
eu tenho um componente de menu que tem a função de ir para uma rota _slug, que é a seguinte (eu tentei simplificar o código ao máximo):
<template>
<input @keydown.enter="search" type="text" v-model="term" id="groupId" placeholder="Pesquisar"
class="rounded-lg pl-10 bg-[#E6E6E6] text-[#818181] h-7">
</template>
<script lang="ts">
export default {
name: 'Products',
data(): {} {
return {};
},
async mounted() {
this.get()
},
methods: {
search() {
const searchUrl = `/search/${this.term}`;
try {
this.$router.push(searchUrl);
console.log(this.term);
} catch (error) {
console.error(error);
}
console.log(this.term)
},
async get() {
// retorna dados do banco
},
}
}
</script>
a função funciona se eu já estou no _slug (que eu testei usando a url), exemplo:
http://localhost:3000/search/termoqueeupesquisei
a rota dinâmica (_slug) da pesquisa é mais ou menos assim:
<template>
// mostra dados do(s) produto(s), se houver
</template>
<script lang="ts">
export default {
name: 'Products',
data(): { products: Product[] } {
return { products: [] };
},
async mounted() {
this.get()
},
methods: {
async get() {
// query pro banco
},
}
}
</script>
mas em outras páginas, como na página home, que é essa:
<template>
<div>
<Menu></Menu>
<MainBanner></MainBanner>
<Products></Products>
</div>
</template>
<script lang="ts">
export default ({
name: 'IndexPage',
})
</script>
a função não funciona, ela até executa, mas com o comportamento estranho, vou tentar explicar:
o url da home:
http://localhost:3000/
redireciona pro _slug (do jeito certo):
http://localhost:3000/search/termoqueeupesquisei
mas então ela muda a rota para essa (em mili segundos):
http://localhost:3000/?
e volta pro url de origem;
http://localhost:3000/
Coisas que eu já tentei
- checar no console se o termo está chegando (ele chega normalmente em toda página que tem o componente do menu)
- remover todos os componentes e deixar só o menu
- usar replace ou invés de push no método da rota
- mudar formato do método de rotas
- usar botão ao invés do input
estou ficando sem ideias, se algúem souber algo ficaria agradecido se algúem me ajudasse