2
respostas

Componentes em Comum em várias páginas (Menu e Navbar) com uma única declaração.

Boa Tarde pessoal, beleza? estou com um cenário aqui no VueJS que acredito que seja algo "comum" alguém já ter passado, mas ainda não consegui pensar em uma solução.

Eu tenho uma tela (home) que é a tela inicial do meu sistema após o usuário ter realizado o Login. Nessa tela eu tenho uma listagem de "n" clientes cadastrados. Ao clicar em determinado cliente eu entro em uma página de edição do mesmo. Até aqui tudo bem, o fluxo acontece perfeitamente. No entanto existem componentes que são "reutilizados" sempre nas duas telas, o meu "menu" e a minha "navbar".

Eu gostaria que esses componentes fossem criados apenas uma vez na minha aplicação, pois atualmente eu estou criando eles novamente dentro de cada "view" que possuo no sistema.

Segue um exemplo do layout da aplicação:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeOnde os blocos em vermelho deveriam ficar "fixos". E o bloco "central" em azul, deverá carregar todo o meu conteúdo da aplicação. (Alterar conforme as interações da página).

Ainda não sei como realizar as tratativas nesse cenário, acredito que deu para entender o cenário que gostaria de implementar.

2 respostas

Eu acho que o que você poderia tentar era criar um component genérico com seu layout de navbar e menu nele e dentro desse componente você passar seu router-view Algo assim

    <component :is="layout">
      <router-view />
    </component>

Claro que tbm iria que ter o router-view dentro da sua navbar e menu para redirecionar. É um tipo de layout bem complexo de inicio, mas você deve conseguir com tentativa e erro ou se quiser pode olhar algum blog que ensina mais a fundo pq vc provavelmente vai ter que adaptar em seu código algumas coisas

Beleza! Eu vou dar uma experimentada em alguns cenários por aqui mais tarde, caso consiga algum progresso eu posto para a comunidade, acredito que é algo muito útil caso de certo!