Executando verificação de segurança...
1
pedrosouza458
2 min de leitura ·

[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

1
0