e Fala jovem Thiago Matos aqui Nesta aula a gente vai começar a estudar um esquema de roteamento do dias vem comigo jovem e Cara isso é muito simples a gente vai precisar instalar um plugin oficial chamado viu rota Tá certo a esse cara aqui ó alto é ponto verde essa para o óleo eu vou aqui em gás e aqui pé documentação oficial obviamente a gente vai passar tudo um por um aqui é muita coisa mas eu vou te dar uma visão geral bem interessante aqui tá certo cara lê a documentação é sua fonte oficial de
informações ao canso de dizer isso então o seguinte já que a gente tá utilizando e você ali certo a gente vai fazer a instalação desse cara via o viu CL beleza e galera eu estou com viu instalado aqui do zero né exatamente como a gente fez lá nas primeiras aulas Então faça a instalação do zero aí fresquinha tranquilo porque senão Esse é o viu rota vai tentar substituir alguns arquivos pode ter conflito E aí você vai ter dor de cabeça e aí quando você já tem um projeto rodando você tem que fazer instalação do viveiro
alta manualmente e manualmente a gente não vai fazer aqui o que é eu faço né eu entro bem um detalhe eu acho que tem mais 10 ou 15 aulas no curso um verde é ser próximo você quer se tornar né profissional IV DS Você tá curtindo essa série aqui no the view da introdução do vídeo e esse e quer realmente mergulhar de cabeça o curso viu próprio para você o link está na descrição mas chega de choro nelas e vamos lá então para adicionar o vinho o alta a gente vai utilizar o comando viu s
e o nome do Plugin que nesse caso é rosa e aí ele vai utilizar o plugin né vai instalar o plugin clique plugin volta para poder instalar o plugin original oficial do vídeo e essa é para o instalando plugin jovem é uma confusão mas é isso mesmo então vamos esperar aqui a instalação e a gente vai ver o que é que ele vai o hino nosso projeto que levar mexer em vários arquivos e aí a gente vai um por um mas chega nesses arquivos aqui ele já me perguntou e use History mode for roads eu
vou escolher Não escolha não também você eu vou entrar nesse assunto já já na verdade quanto instala deixa eu entrar nesse assunto aqui olha só aqui no gás a gente tem aqui diferentes History mode Ou seja é o modo de histórico do navegador a gente pode utilizar o resto Moms ou html5mode com a diferença Tiago o recheio moldes ele é mais ficar assim ó ré/serviços o Barra produtos ou barra qualquer coisa e o HTML5 modo ele não vai descer essa diferença só que em produção quando você jogasse esse projeto reprodução se você tiver utilizando HTML5
modem você tem que configurar o servidor para interpretar a URL amigável certo e aí você vai configurar o apatia ou eu sou node enfim aí são outros quinhentos jovem Então vamos voltar aqui para o roteamento 10 Já foi instalado e vamos analisar o que aqui o que é que ele fez Tá certo então vamos lá aqui primeiro e pega tipo de Jason a gente vê que ele estalou o viro alta e também ele tem aqui o o filé O plugin do Clay desinstalação show aqui meio.rs ele injetou o alta né o arquivo JavaScript dessa parte
aqui a gente vai analisar já já aí o que é que ele fez aquilo até separar para ficar fácil a leitura a gente está criando aqui a distância do vds e aqui ele está injetando o roteamento né esse essa distância do volta e a gente está montando o verde e esse lá naquele elemento é a gente já estudou Então vamos lá flauta index aí a gente tem esse arquivo grandão aqui que é onde tem as configurações do nosso e do saco cara aqui a gente importa certo ou o que é necessário eu dou viu o
alta nesse caso aqui pra gente volta para a gente criar distância e cliente web rechstore que é para dizer qual é o modo que a gente quer usar essa aqui a gente tem uma rede de objetos e justamente esses objetos são as rotas certa objeto aqui e objeto aqui cada objeto possui algumas configurações como por exemplo pergaminho o nome da Rota O componente que a rota vai vai gerar é feito cara é o seguinte é aqui ele importou com componente da forma normal como a gente viu importando e aquilo é feito uma forma diferente mas
ele já dá uma dica aqui para gente ó lazy load when his House his bíceps ou seja dessa forma aqui mas vai rodar o carregamento lento né pedir é só vai carregar esse componente quando você visitar essa rota dessa forma aqui ele vai carregar o componente Jadir bom então recomendo sempre você utilizar dessa formatação aqui certo porque ele vai ficar mais performático show de bola aí ele criou esse arquivo home viu né E essa arquival civil dentro de Deus né Deus como se fosse páginas deve Deus aqui a gente trata como páginas é o teu
about viu e Romeu tranquilo aí a mágica acontece aqui cara dentro de é possível a gente tem uma lista de links certo esse link aqui volta link na verdade esse componente Rural telinha tá disponível quando você instala o plugin viu Rosa beleza E por sinal aqui você pode usar os karaokês Sem problema nenhum a gente vai testar Jajá ele tem aqui uma próprio não é uma propriedade tio para saber para onde é que vai ser né nesse caso aqui about esse caso aqui arrumo certinho para para onde que vai quando você clicar para esse lugar
aqui ó e aqui cara é onde a mágica final acontece Walter para se ouviu ou Pascal rotteveel é aonde o vídeo é você vai renderizar viu Ou seja aqui a gente não disse que havia essa daqui a gente não disse que o componente da Vila esse daqui onde é que ele vai injetar esse cara ele vai injetar exatamente onde você colocar Alto viu a gente vai ver tudo isso na prática agora bom então se eu vim aqui no nosso ep tá rodando eu tenho aqui aqueles dois links home a baldes eu clico em about one
about funcionando normal e aí você vê aqui o endereço no navegador com o resto levo que a gente escolher um resto na no Story Mode faz é inveja que tá funcionando tanto com Pascal Case okeba que é sem problema nenhum o cara seu remover Sobral te ver o que acontece já viu já foi porque ele não está conseguindo injetar a viu e eu posso até Navegar mas não chegou nada porque eu não tenho local de renderizar viu Tá certo então por isso que é importante ter esse Walter viu show de bola mas vamos criar uma
rota né da gente a gente estalou ele tem outros automático mais eu quero criar uma rota também então vamos lá criar mais um objeto aqui pé eu vou dizer que essa rota aqui é serviços o nome dela vai ser serviços e o componente ela vai é vai renderizar é o componente Deus/eu vou seguir o mesmo padrão sério se eu conto viu e pronto somente isso daí E aí Opa salvei aqui sem querer aí ele já deu erro aqui porque ele não consegue enxergar Na verdade ele localizar o componente vamos cresce o componente aqui Services e
eu conto viu aí eu tenho aqui o meu templates eu e o meu templates service serviços perfeito agora já tá rodando seu acessar aqui ó Bota/serviços ele vai rodar rodou Vamos colocar aqui um link né o link para poder ficar legal serviços Ou passa serviços e aqui em Barra serviços e pronto show de bola Olha lá Maravilha jovem Maravilha cara uma coisa que interessante você pode utilizar links né utilizando a esfinge da URL não é da Rota propriamente dita como tá aqui/serviço Ou você pode utilizar o objeto e colocar aqui o nem o nome da
Rota vai ser o que serviços e obviamente a gente tem que dar um Buzz aqui porque senão esse cara fica como se fosse uma estranhos né é onde tem que ser objeto JavaScript vai funcionar da mesma forma Olha lá 8:00 tem que fazer isso com a diferença porque esse cara aqui pode ser algo dinâmico Pode ser aqui ó vou colocar rota dinâmica e aqui ó e aqui no Script esportes default aqui nos clipes eu posso ter um data data ó e aqui eu posso ter esse cara hot o Walt Disney inglês e português rota dinâmica
com a morte rota dinâmica E aí ele vir aqui dinamicamente você pode montar objeto da forma que você quiser por conta de uma lógica x y z Tá certo e aí você monta o objeto e joga aqui o interessante também é que se você alterar a rota né se você alterar a rota aqui colocar para produtos e permanecer o nome a minha rota vai continuar Funcionando aqui ó certo meu link vai profissional porque eu tô pegando pelo nome certo já nesse caso aqui about ele tá pegando pela Rota Celta alterar para a empresa ele vai
quebrar o meu Limpo olha lá não tá mais rodando a Vivo é vai quebrar E agora voltei é um tem uma série de vantagem utilizar aí objeto É em vez de todo as trend né mas parece que talvez seja muito mais fácil direto aí eu deixo as o seu critério cara a gente comprou muita coisa aqui tem mais coisa para falar sobre roteamento para vou deixar para próxima aula para não ficar muito assunto acumulado em uma aula só tá certo eu fico por aqui e te vejo lá fui eu E aí [Música] E aí E
aí [Música]
