Introdução ao roteador da Vue. js 3 | Chris Dixon | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Introdução ao roteador da Vue. js 3

teacher avatar Chris Dixon, Web Developer & Online Teacher

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      2:28

    • 2.

      Visão geral do pacote de configuração e roteador

      9:25

    • 3.

      RouterLink e RouterView

      8:39

    • 4.

      Parâmetros e consultas

      12:39

    • 5.

      Rotas aninhadas

      8:02

    • 6.

      Roteador de classes

      3:30

    • 7.

      Páginas de fallback

      5:18

    • 8.

      Navegação programática

      5:50

    • 9.

      Agradecimento

      0:49

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

15

Estudantes

--

Sobre este curso

Se você é novo no Vue Router, este é o curso para você!

Esta série é toda sobre o pacote do roteador Vue.js. Em especial, vamos cobrir o Vue 3 e o Vue Router versão 4.

Este curso é para qualquer pessoa com uma pequena experiência em Vue.js (ou possivelmente outros frameworks), que queira aprender sobre como usar o roteamento em aplicativos de página única. Não é necessária nenhuma experiência de roteador, cobrimos tudo do zero!

O que é coberto neste curso: -

  • - O que é o roteador Vue?
  • - O papel do roteador em aplicativos de página única
  • - Como configurar um novo projeto no Vue.js 3 com o Vite
  • - O objeto e configuração de rotas
  • - A diferença entre arquivos de componente e de visão
  • - Alternando entre páginas usando o RouterLink
  • - O suporte e o trabalho com caminhos estáticos e dinâmicos -
  • Rotas nomeadas
  • - Exibindo páginas com a visualização de roteador
  • - Como acessar informações completas de roteador e rota atual no modelo
  • - Usando com configuração de script
  • - Como configurar segmentos dinâmicos em nosso objeto de roteador
  • - Params de URL dinâmicos
  • - Como acessar e acessar as cordas de consulta
  • - Criação de segmentos de URL dinâmicos
  • - Adicionando rotas adicionais
  • - Rotas de aninhamento em outras páginas ou componentes
  • - Usando a matriz de crianças
  • - Como ver quais cursos são adicionados automaticamente
  • - A diferença entre roteador-link-active e roteador-link-exact-active
  • - Como os cursos são adicionados com rotas vue aninhado
  • - Correspondências de URL parciais e completas
  • - Onde atualizar o estilo CSS
  • - Como lidar com usuários que visitam roteador/url não reconhecido
  • - Criando fallback/404 páginas
  • - Como acessar params não reconhecidos
  • - Como lidar com várias páginas de retorno e partidas parciais
  • - Como acessar a rota e as informações do roteador no script e no modelo
  • - O método push() do vue router e incluí-lo no script e no modelo
  • - O método de replace() do vue router
  • - História do navegador -
  • - Navegando no histórico do navegador com os métodos de roteador de avanço, retrocesso e avanço.

Obrigado por passar por lá, e espero que você goste do curso!

Conheça seu professor

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Visualizar o perfil completo

Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Ei, bem-vindo a esta aula sobre o roteador de visualização e, mais especificamente, o pacote que é compatível com a versão três do View, que é a versão quatro do View Router. O pacote de rotas de visualização em sua essência nos permitirá alternar entre as páginas em nossos aplicativos, mas também há muito mais do que isso. Esta é uma aula introdutória que inclui a maioria dos tópicos essenciais que você precisará para começar. Começamos do início criando um novo projeto da versão três do VGS com o pacote de rotas cobrindo os requisitos de que precisamos para começar Em seguida, abordamos o conteúdo, incluindo a rota dos arquivos, o que todos esses arquivos significam e onde configurar as rotas que permitem alternar entre essas páginas. Continuando, você aprenderá como configurar os links para alternar entre as páginas e também descobrirá como temos controle total sobre onde o conteúdo da página é reproduzido. Aprenderemos como criar URLs de páginas dinâmicas para que possamos incluir variáveis como o usuário atual em nossas rotas Trabalhar com parâmetros e cadeias de caracteres de consulta também é importante ao alternar entre páginas e o pacote do roteador de visualização também nos ajuda, permitindo que passemos informações entre rotas e também abrangendo a extração de informações passadas para as entradas do formulário roteamento nem sempre é tão simples quanto um conjunto de links mapeados para cada página Também podemos ter a necessidade rota aninhada dois, e também temos isso coberto Em nossos exemplos, abordamos estilo CSS para aplicar não apenas aos nossos links, mas também com base no fato de a rota atual estar ativa Abordamos páginas alternativas e como habilitar o roteamento dentro do Javascript. Quem sou eu? Meu nome é Chris e estou envolvido no desenvolvimento web desde muito jovem e também ensino on-line e pessoalmente há mais de uma década. Eu uso o GS e a rota em meus próprios projetos. Tenho experiência em primeira mão, embora o conhecimento do ViewGS não seja estritamente necessário, um pouco de exposição a isso realmente ajudará você a entender essa aula, pois não abordamos a parte da visualização em Se estiver vindo de uma estrutura de front-end diferente , como o react, você também deve acompanhar. Por fim, agradeço por dedicar seu tempo para ver esta aula e espero que você a ache útil para aprender o pacote do roteador de visualização. 2. Visão geral do pacote de configuração e roteador: Bem-vindo à série em que daremos uma olhada no pacote de rotas de visualização. Em particular, daremos uma olhada em como adicionar o roteador e usá-lo usando a versão gratuita do view. Se você nunca usou um roteador antes em nenhuma outra estrutura ou biblioteca, é basicamente um pacote que podemos usar para alternar entre páginas de visualizações Por que precisamos de um pacote para fazer isso em primeiro lugar? Bem, geralmente, ao criar aplicativos ou sites com o UGS, estamos criando algo chamado aplicativo de página única Um aplicativo de página única pode parecer bastante enganador. Isso não significa que nosso site seja apenas uma única página. O que isso significa é que, nos bastidores, quando visitamos um site ou aplicativo pela primeira vez, geralmente é baixado um único arquivo Javascript. Este é um grande pacote de Javascript que vem do servidor Então, no front-end, precisamos lidar com a forma como precisamos alternar entre várias páginas ou componentes neste pacote usando tecnologias web mais tradicionais como Php ou Ruby on O que geralmente fazemos ao clicar em páginas ou links de navegação diferentes é solicitar uma nova página do servidor. Mas com aplicativos de página única, já temos todos os scripts Java agrupados Na primeira solicitação, precisamos alternar entre essas várias partes ao lidar com um pacote de roteador, como o roteador de visualização. No entanto, não se trata apenas de alternar entre as páginas. Geralmente , também podemos descobrir muito mais recursos , e veremos muitos deles ao longo desta série. O pacote View Router também é oficialmente suportado e mantido pela equipe principal do View GS. É profundamente integrado, suportado e atualizado. Se você quiser manter as coisas realmente simples, também há um link CDN que você pode usar para o roteador de visualização Mas para esta demonstração, vou usar uma ferramenta de construção. Vou fazer uso do pacote Vt. O Vt efetivamente nos permitirá montar ou criar um novo aplicativo de vestido View E isso nos fornecerá muitos recursos interessantes, como substituições de módulos ativos, que atualizarão automaticamente o navegador Sempre que fizermos alterações nosso projeto sem falar mais, continuaremos criando um novo projeto. Para isso, vou usar o código do Visual Studio. Entre no terminal, que está embutido aqui. Podemos ver na documentação do VGS. Para criar um novo aplicativo de visualização, precisamos usar o MPM no modo de exibição No máximo, você deve se certificar de que tem a versão mais recente ou atual do node JS instalada. Você pode testar isso digitando MPM v para a versão in, atualmente está na versão oito Em seguida, podemos usar o comando CD para entrar em qualquer diretório para o qual você deseja mover. No meu caso, vou mudar para o desktop para instalar este projeto. E então podemos executar o comando init. Esta é a visualização do MPM, o mais tardar. O conveniente de criar um novo projeto de visualização gratuita é que também podemos instalar o pacote do roteador de visualização neste estágio. Se precisarmos instalar algum pacote adicional, tudo bem. O nome do projeto diz apenas view router. Um texto datilografado Não, não precisamos do JSX. Podemos adicionar o roteador de visualização porque esse é o objetivo da série. Não precisamos de nenhum gerenciamento ou teste de estado. Ok, e vamos abrir isso dentro do código do Visual Studio, arrastar isso para dentro. Talvez você também precise reabrir o terminal. E a partir daqui, pouco antes de prosseguirmos, precisamos executar o MPM install para instalar todos os pacotes não necessários Está bem? A última etapa que precisamos é MPM run dev para executar nosso servidor de desenvolvimento Assim, podemos ver nosso projeto dentro do navegador. Copie este link ou clique em comando e controle para abri-lo. Agora criamos com sucesso um novo projeto de visualização gratuita. Uma das coisas que você notará instantaneamente se tiver instalado a rota de visualização neste estágio é que temos dois links para alternar. Temos o link inicial e também a página sobre. Temos algumas funcionalidades de roteamento prontas para uso, mas também precisamos adicionar nossas próprias rotas e nossos próprios recursos. Vamos dar uma olhada nos bastidores e ver como isso acontece. Se entrarmos na pasta de origem, na pasta do roteador, teremos esse índice. Você verá no topo deste arquivo que já temos o pacote view router instalado pois o adicionamos quando configuramos o projeto. Isso é importar duas coisas desse pacote. O primeiro é Criar roteador, que você pode ver aqui. Isso cria um novo objeto de roteador com todas as nossas rotas e configurações. Você pode ver o interior, podemos escolher entre o histórico ou também podemos configurar o modo hash E veremos isso mais tarde, mas provavelmente o tempo em que você passará a maior parte do trabalho com o roteador está dentro dessa matriz de rotas. Se dermos uma olhada aqui, cada uma de nossas rotas é configurada como um objeto Para o mais simples aqui, configuramos um caminho de arquivo. E esse é apenas o diretório inicial. Isso é o que vemos quando simplesmente acessamos a URL do nosso projeto. Esse é um nome ou um alias que atribuímos a cada uma dessas rotas e podemos referenciar posteriormente quando configurarmos nosso componente de links, que queremos exibir Quando estamos nesta página, importamos algo chamado visualização inicial. Podemos ver na parte superior que essa visualização inicial é extraída da pasta de visualizações. Dê uma olhada na barra lateral, abra as vistas e teremos nossa casa e nossa visão geral Se abrirmos qualquer uma dessas duas rotas de visualização aqui, pareceremos bem familiarizados se você já trabalhou com o VGS no passado e elas estão configuradas exatamente da mesma forma que um componente GS de visualização normal Temos o modelo que adiciona nosso código HTML à página. Podemos ter uma seção de estilo opcional e também podemos ter uma seção de script dois. Eles têm exatamente a mesma aparência dos nossos componentes, que podemos ver aqui. A única diferença em termos de estrutura é que os estamos organizando em uma pasta de visualizações. Sabemos quais precisamos alternar com o roteador. Só para esclarecer, um componente pode ser qualquer peça ou seção de nossa página, mas garantimos que nossa pasta de visualizações contenha as rotas entre as quais você deseja alternar com o roteador. De volta à página de índice de rotas, podemos rolar para baixo e ver nosso segundo objeto de roteador. Isso faz com que o caminho a seguir seja reduzido. Também podemos digitar isso, é enter e, em seguida , acessar a página sobre. Isso também tem um nome de roteador, mas a diferença entre nossas duas rotas aqui é a primeira referência direta aos componentes e a segunda está fazendo algo chamado importação. Como podemos ver aqui, temos alguns comentários acima. Isso nos diz que, em vez importar diretamente nossos componentes, incluindo isso com o resto do pacote, estamos segregando nossa visão sobre Assim, podemos fazer uso de algo chamado carregamento lento. Esse é um dos outros recursos do pacote View Router. Ele também é capaz desse carregamento lento. Conforme mencionado anteriormente, quando visitamos pela primeira vez um aplicativo de página única e digitamos o URL, isso fará o download do pacote Javascript completo do servidor No entanto, embora às vezes não queiramos esse pacote grande, ele pode ser um aplicativo muito grande O que podemos fazer em vez de ter um único arquivo de script jar é dividi-los em arquivos separados. Isso é o que aconteceu aqui. Separamos a visualização sobre em um arquivo separado. Isso só é baixado do servidor quando clicamos no link sobre. Se você quiser, também podemos mudar para um componente regular, como acima, digamos, Sobre a visualização. Também precisaríamos importar isso exatamente como acima. Vamos importar a visualização sobre. Isso fica ao lado da vista inicial. Só precisamos mudar o nome. Diga isso. O Vt atualizará automaticamente a Ainda podemos alternar entre essas duas rotas. Finalmente, precisamos incluir esse roteador dentro do nosso pacote de visualização. Então, exportamos isso na parte inferior e depois para o arquivo principal. Esse arquivo de roteador exportado é então importado para o nosso arquivo Javascript principal. O resto são visualizações regulares. Criamos um novo aplicativo View GS, que é armazenado dentro do aplicativo. Então, podemos adicionar esse pacote de roteador ao nosso aplicativo antes que ele seja montado no dom. 3. RouterLink e RouterView: Anteriormente, configuramos um projeto de visualização gratuita. Instalamos o pacote do roteador de visualização. Analisamos brevemente as opções do roteador. A página de índice do roteador passa por nossos objetos de rota, que são mapeados para um componente específico. Por exemplo, fold about renderizará essa visualização chamada About view. Podemos ver isso se olharmos nossos dois links aqui à direita, alternarmos entre nossas duas visualizações. Mas, atualmente, ainda pode haver um pouco de mistério por trás de como exatamente esses dois links estão trocando esses URLs. Isso ocorre porque esses dois links estão sendo adicionados por padrão quando configuramos nosso projeto Vamos dar uma olhada nos bastidores e ver como podemos configurá-los nós mesmos e também adicionar outros para este projeto. Nossos links foram configurados automaticamente na visualização do aplicativo, mas eles também podem residir em qualquer outro componente. Segundo, podemos ver na parte superior, precisamos importar algo do pacote do roteador de visualização. E isso é algo que precisamos é de um componente de link de roteador. Esse é todo o código que vimos. No lado esquerdo, temos o logotipo da visualização, que você vê aqui. Temos os componentes Hello World com a mensagem. Então, temos nossos dois links de navegação. Aqui embaixo, usaremos os componentes do link do roteador que importamos do pacote view router. Você pode ver que isso tem um atributo chamado 22 que é o local para o qual queremos vincular quando clicado nele e temos o texto da página inicial e sobre quais links para esses dois URLs Você também pode estar se perguntando por que não usar o elemento normal em HTML a para vincular as páginas internas Aqui, podemos usar uma barra frontal ou também podemos dizer que, bem, é preferível usar o link do roteador em vez elementos A tradicionais ao usar o view GS por vários motivos Uma das grandes diferenças é que, quando usamos o modo histórico como estamos atualmente, o pacote do roteador de visualização precisa interceptar o clique de qualquer um desses links e impedir que o navegador atualize a página, o que acontece automaticamente Ao usar o view GS ou um aplicativo de página única. Não precisamos atualizar essa página pois temos automaticamente todo o código jarvscript disponível no pacote, entre os quais podemos alternar Vamos remover isso. Além disso, apenas como uma nota lateral rápida, se você usar o pacote view router com base na visualização dois, você pode ter usado a tag prop que se parece com esta Costumávamos usar isso para definir exatamente o tipo de elemento HTML com o qual queríamos que fosse renderizado, mas isso não está mais disponível para uso neste pacote Além disso, ao usar route to link, não estamos limitados apenas a passar uma string estática para nossos dois adereços, assim como estamos aqui Também podemos transmitir qualquer dado dinâmico que você desejar. Por exemplo, podemos ter um usuário e querer vincular a um ID de usuário específico. Vamos ao nosso roteiro. Vamos configurar uma constante chamada user, que será um objeto. Mas antes de fazermos isso, vamos colocar isso na ref. Precisamos importar ref do pacote de visualização se você nunca viu isso antes. Esse é um recurso de visualização livre, o que significa que todo o conteúdo interno será mantido reativo Portanto, qualquer componente que dependa desses dados será atualizado sempre que houver uma alteração. A partir daqui, podemos passar nossos dados como um objeto e dizer algo como nomear o ID do usuário Como estamos usando a configuração do script, nosso usuário será automaticamente retornado do nosso script e disponibilizado para uso. Sem modelo. Podemos abrir isso entre chaves duplas, há um dado que precisamos, mas também podemos fazer uso disso dentro dos dois suportes Vamos duplicar isso, vamos dar uma olhada em um exemplo. Ainda precisamos de aspas duplas para cercar tudo isso, mas podemos usar a tática do Javascript para introduzir variáveis de Javascript. Talvez queiramos usar algo como forward slash user. Em seguida, usando o símbolo do dólar e as chaves, podemos extrair nossos dados dinâmicos, como nosso ID de usuário Digamos que é usuário. Mas se fôssemos até o navegador e experimentássemos isso, isso causaria um problema. Vamos tentar isso. Clique no usuário. Dentro dessa chave de link, vemos o ID do usuário em vez do valor dinâmico. Assim como com qualquer outra coisa no View free, quando usamos dados dinâmicos, também precisamos usar a sintaxe V bind, que é dois pontos E isso diz ao View GS que não renderize isso como uma string, mas, em vez disso, leve em consideração os valores dos disponíveis que passamos agora se clicarmos no usuário Isso agora incluirá os dados dinâmicos de que precisamos. Isso começa a nos dar uma ideia da flexibilidade que temos com o roteador de visualização. Também podemos estender ainda mais ao passar um objeto. Novamente, como estamos usando dados dinâmicos ou Java Script, precisamos incluir os dois pontos para remover isso Podemos então nossa string passando o objeto Javascript. É muito simples. Esse objeto Javascript pode simplesmente conter o caminho que acabamos de ver, barra frontal O mesmo vale para o link about, passando um objeto pelo caminho, mas esse estava à frente. Isso ainda deve funcionar exatamente da mesma forma que antes. Veremos como dois links estão funcionando na parte superior. Nós teríamos escrito isso corretamente. Isso funciona bem, mas esse é apenas um exemplo simples, e não temos nenhuma funcionalidade adicional do que tínhamos antes. Mas, em vez disso, podemos passar para esse objeto uma referência aos nomes que já demos a essas rotas no arquivo do roteador. Se você se lembra do vídeo anterior na página de índice dos roteadores, cada uma dessas rotas tinha uma propriedade de nome exclusiva que tínhamos em casa Podemos referenciar dentro do nosso objeto, este passando o nome de casa. Na verdade, isso era o mesmo que as letras minúsculas. E também, por volta de, vamos experimentar este. Você pode estar se perguntando por que fizemos todo esse esforço quando funciona exatamente da mesma forma que funcionava originalmente. Bem, um dos motivos e um dos benefícios de usar o nome é a re usabilidade Se você pensar sobre isso, se tivéssemos esse link de roteador sobre nós em vários locais em nosso projeto e , um dia, pudéssemos decidir que, em vez deixar o link na barra frontal, talvez queiramos alterá-lo para algo como barra frontal sobre Bem, em vez de entrar em cada uma de nossas visualizações ou componentes e alterar esse link, tudo o que precisamos fazer é acessar arquivo do roteador e alterar o caminho para cerca de nós. Esse nome ainda seria relevante e ainda funcionaria em todos os nossos componentes. Isso é só uma mudança de volta. Ok, a próxima coisa a descobrir é algo chamado Route of View. Descobrimos como podemos alternar entre nossas páginas usando o link do roteador, que temos aqui. Mas também importamos algo chamado Rota de visão. Essa rota de visão é responsável por renderizar nossa página na tela Dentro do aplicativo, temos essa seção principal, que, devido ao estilo padrão, colocou à esquerda Em seguida, à direita, o conteúdo de nossas duas visualizações é exibido. Isso acontece porque colocamos a rota de visualização na parte inferior desse arquivo. Essa é a saída do nosso conteúdo. Por exemplo, se você quiser remover isso e colocá-lo em um local diferente, agora ele se move para a esquerda. Isso nos dá a flexibilidade total de onde renderizamos o conteúdo de nossas páginas. 4. Parâmetros e consultas: O pacote de rotas de visualização também tem muito mais a oferecer do que apenas alternar entre componentes. Ele também pode ser usado para passar dados na forma de parâmetros e também para consultar strings ao trabalhar com URLs, assim como estamos aqui, atualmente estamos trabalhando com o link home e o forward about Talvez também queiramos adicionar informações adicionais , como Pam, assim como um usuário E, muitas vezes, podemos querer informações adicionais, como consultas, URL anterior, que têm um ponto de interrogação como este E então veremos algumas informações adicionais , como essa. Agora, queremos dar uma olhada em como podemos trabalhar com os dois parâmetros consultas dentro do roteador de visualização Vamos até a visualização do aplicativo onde temos nossos dois links de roteador. Primeiro, daremos uma olhada nos parâmetros ou parâmetros que são como variáveis para uma determinada rota no link do roteador Podemos adicioná-los dentro de nossos dois adereços. Lembre-se de que, anteriormente, analisamos adição de variáveis exatamente como fizemos aqui. E esse é o exemplo comentado. O que queremos fazer é remover a rota do nome. Na verdade, vamos apenas comentar isso e depois duplicar isso Então, vamos manter isso totalmente intacto. Podemos configurar o caminho exatamente como fizemos anteriormente. Isso será vinculado a um ID de usuário específico, que armazenamos nesse objeto. O caminho, já que estamos usando variáveis, podemos defini-las com o bactics. Vamos dizer usuário encaminhado, então talvez queiramos ter o ID do usuário como temos aqui, usando o script de trabalho colocado com as alterações do ID do usuário no link do usuário. Então, podemos ver que temos esse link de usuário atualizado. E se clicarmos aqui, veremos nosso usuário. E então a variável que vem logo depois, esse é nosso ID de 1234, mas atualmente não temos um componente correspondente para renderizar O que vamos fazer é alterar a visão sobre, digamos, a visão do usuário. Estamos mudando isso. Também precisamos acessar nosso roteador. E, em seguida, o índice JS, mudaremos a visão sobre, a visualização do usuário. Isso também está sendo atualizado aqui. O segundo componente, o nome do usuário. Agora também precisamos mudar isso para ser o usuário da barra frontal. Agora, se clicarmos nisso, ainda veremos, apesar de sermos usuários do Forward Slash, que temos um problema dentro do console Não temos nenhuma correspondência para o usuário com barra direta e, em seguida, encaminhamos nosso ID de usuário Isso ocorre porque não estamos levando em consideração a URL completa. Com esse caminho, teremos uma variável que poderíamos , se quiséssemos adicionar 1234, mantê-la codificada E então vemos que somos levados para a página sobre e ela muda para a página do usuário, é consistente, ainda podemos ver que somos direcionados para a página correta. Mas o problema que podemos ter é que se tivermos um ID de usuário diferente, se tivermos o login de outra pessoa, essa rota não será encontrada. Em vez disso, precisamos ser capazes de capturar qualquer URL diferente que seja adicionada e tratar efetivamente esta seção como uma variável. A maneira de fazer isso na página de índice dos roteadores é, em vez de ter um valor codificado como esse, podemos usar os dois pontos para capturar o valor dentro de uma variável Agora, o pacote do roteador de visualização agora entende que essa seção ou esse segmento da URL é uma variável e pode mudar e ainda renderizará nossa visualização do usuário. Agora podemos digitar o que quisermos, e isso sempre é exibido. A próxima coisa a pensar é como podemos colocar essas informações do usuário em nossa página ou componentes? Bem, se pensarmos sobre isso, se for um usuário e quisermos obter o ID de usuário exclusivo, talvez queiramos exibir isso ou algo parecido com o nome do usuário nos componentes. A maneira de fazer isso é usando esse nome de variável que fornecemos dentro do caminho. Lembre-se de que chamamos esse ID. Se acessarmos a visualização do usuário, podemos acessar as informações da rota atual dentro das calibragens duplas usando a rota do símbolo $1 Diga essa atualização. Podemos ver que todas as informações da rota atual são exibidas. Temos o caminho completo, que é exatamente o que vemos dentro da barra de URL. Temos o nome que configuramos no arquivo do roteador. Também temos os parâmetros em que podemos ver o ID atualmente corresponde ao que temos aqui É exatamente assim que podemos acessar essas informações de ID dentro do nosso componente. No momento, estamos exibindo a rota. Como se trata de um objeto, podemos dizer doPamd para capturar esse valor que é Vamos tentar essa rota. Peramado. Agora, qualquer valor que adicionarmos em seu segmento de ID será exibido dentro do modelo. Além disso, apenas como nota lateral dois. Além de usar a rota do símbolo do dólar, também podemos acessar o roteador do símbolo do dólar. Isso nos dá um pouco mais de informações sobre todos os recursos do roteador. Podemos ver coisas como as opções em que temos o modo histórico definido. Podemos ver a rota atual. Podemos ver todas as nossas rotas que são configuradas como uma matriz. Aqui temos a casa e também a segunda rota que é nosso usuário. Todas essas são as mesmas informações de rota que configuramos na página do roteador. Mais uma vez, o roteador Dollar Symbol fornecerá mais informações sobre o pacote completo do roteador. rota do símbolo do dólar exibirá apenas informações sobre a rota atual que estamos visitando. Esse nem sempre é o caminho que queremos seguir se quisermos acessar variáveis ou informações em nosso modelo. Talvez também queiramos incluí-los em nosso script Jar. Da mesma forma que podemos fazer isso se estivermos usando a API de composição, que usamos atualmente , digamos que temos um script e usaremos a configuração do script. Também podemos importá-los da rota de uso do pacote do roteador. Podemos ver aqui pelas informações que isso é o equivalente à rota do símbolo do dólar que acabamos de usar. Essas são todas as informações sobre nossa rota atual, incluindo os parâmetros, se você quiser Você também pode importar e usar o roteador. Isso é o equivalente ao roteador com símbolo de dólar. Queremos importá-los do pacote do roteador view. Em seguida, nós os acessamos da mesma forma que faríamos com qualquer outro composto em vista Usamos route, os chamamos como uma função e armazenamos o valor de retorno dentro de uma variável. Digamos que cont route seja igual a isso. Então, se duplicarmos isso, também poderemos acessar o local do roteador Em uma rota de log do console corremos e podemos ver que as informações são colocadas dentro do nosso objeto de tag. Temos o nome, os parâmetros, as consultas que veremos em breve, o caminho completo em que estamos atualmente Agora estamos livres para usar qualquer parte dessas informações dentro do nosso código. Também é importante notar que você pode ter vários segmentos dinâmicos dentro do URL, além disso. Você também pode dizer para frente e inserir uma nova variável interna aqui Em seguida, tudo o que você precisa fazer é acessar a página de índice do roteador e configurar uma nova variável para capturar essas informações Agora, isso estará disponível usando esse nome. Além disso, o roteador de visualização também pode lidar com cadeias de caracteres de consulta. Segundo, se você nunca usou uma string de consulta antes, eles conseguem passar algumas informações adicionais em uma URL, exatamente como vimos no início. Você pode ter visto uma URL parecida com esta. Vamos voltar ao nosso primeiro URL ou ao nosso URL inicial. Você pode ver algo parecido com isso com um ponto de interrogação. E então podemos dizer que o usuário é igual a qualquer string em particular. Em seguida, podemos adicionar várias informações separadas pelo comercial e, digamos, plano igual a mensal, o nome Podemos continuar adicionando quantas delas quisermos para que possamos acessar nosso usuário. Podemos acessar nosso plano e podemos acessar nosso nome porque eles estão separados após esse ponto de interrogação. Vamos dar uma olhada em como podemos usá-los. Essas pré-sequências de caracteres podem ser acessadas localmente ou também podem ser enviadas ao servidor Um caso de uso típico para isso seria com o formulário HTML. Vamos ver. Vamos colocar em um formulário a ação de remoção. Como queremos que o view GS resolva isso, configuraremos rapidamente um formulário com um tipo de texto de entrada. O nome será igual ao usuário. Essa seção de nomes, ao trabalhar com consultas, será muito importante Veremos isso dentro da string de consulta. Vamos configurar mais um. Diremos a localização, uma entrada, o nome da localização. Então, finalmente, um botão para enviar. Esta forma de enviar qualquer texto aqui é boa para ver isso. Vá até o navegador, verifique se o usuário está de fora, preencha o nome, a localização e clique em Enviar. Você pode ver instantaneamente, assim que fizer isso, separado por um ponto de interrogação, temos nossas duas informações . Temos o usuário igual a Chris e também a localização igual ao Reino Unido. E ambos são capturados, pois adicionamos o atributo name a cada uma de nossas entradas, tanto o usuário quanto a localização serão enviados ao servidor com o formulário quando enviarmos Se você não sabe nada sobre formulários ou envio de formulários para o servidor, não se preocupe com essas informações. Tudo o que precisamos saber aqui é com este exemplo e, ao usar formulários, essas consultas ou essas cadeias de caracteres de consulta são adicionadas automaticamente ao nosso URL Mas ao trabalhar com o pacote do roteador de visualização, também podemos adicionar esses dois manualmente e acessá-los dentro de todas as páginas ou componentes. Vamos até nosso aplicativo View, que tem nossos links de roteador. Para este, vamos colocá-lo dentro do link inicial, dentro do objeto separado por uma vírgula, podemos configurar nossa consulta que é igual a um objeto Então, dentro daqui, assim como qualquer outro objeto, adicionaremos nossa chave de objeto e nossos valores de objeto. Neste exemplo, vamos colocá-lo em um token, que pode ser qualquer sequência de texto. Você também pode inserir variáveis aqui se quiser salvar. Agora, o acesso é um token dentro de nossos componentes. Como nós, no link inicial, pulamos para a visualização inicial a partir daqui, dentro das calibragens duplas, novamente, podemos acessar a rota do símbolo do dólar para a rota atual até o link inicial todas as nossas informações. E você pode ver aqui dentro que temos essa consulta que é igual ao nosso token. Podemos restringir essa consulta de rota descendente, que nos fornece nosso token, e também podemos simplesmente acessar o valor com o token Se você também der uma olhada no URL, poderá ver como o token foi aplicado agora. Essa é uma maneira conveniente de passar pequenas informações entre nossa rota. Algo como acesso, tokens usam IDs ou qualquer pequena informação. 5. Rotas aninhadas: Conforme mencionado anteriormente nessas lições, o roteador de visualização é realmente flexível. Atualmente, porém, não estamos usando toda a flexibilidade que ele oferece. Tudo o que temos está dentro dessa visualização do aplicativo, temos nossos dois links de roteador para alternar entre nossos caminhos. Estamos colocando-os dentro de uma única rota de visão. Isso não é muito flexível. Isso é simplesmente dizer que temos nossos dois links e todo o conteúdo de qualquer link adicional estará sempre no mesmo local. Mas vamos mudar um pouco as coisas e ver como podemos lidar com algumas situações diferentes. Vamos restabelecer ao usuário também um caminho simples. Vamos duplicar isso e criar a área da conta do usuário dentro do caminho Isso ainda será dinâmico, então podemos dizer conta avançada depois colocar nossa ID de usuário. Coloque isso na parte superior, então é o ID do usuário. Também precisamos configurar isso dentro do nosso índice de roteadores. Para essa cópia, qualquer uma dessas rotas segue em nome da conta e também criará um novo componente chamado visualização da conta. Lembre-se de que alteramos a seção do usuário para que possamos remover os segmentos dinâmicos, mas precisamos adicioná-la à nossa área de conta. Essas são contas de encaminhamento Selecionaremos o ID do usuário criar uma nova visualização dentro da nossa pasta de visualizações. Duplique qualquer um deles. Essa é a visualização da conta. Esclareça tudo isso, algum texto aqui dentro. Também precisamos importar isso dentro da rota para arquivar, copiar e colar E essa é a visualização da conta. Tudo deve estar funcionando bem. Agora temos a casa, o usuário e também a conta. Isso também mostra como usamos o ID e exibimos o novo componente que acabamos de criar. Voltando ao propósito deste vídeo, vamos dar uma olhada nas rotas aninhadas A ideia por trás das rotas aninhadas é usar esses links. Atualmente, estamos substituindo toda essa seção à esquerda devido à nossa rota de visão. Mas e se não quiséssemos, por exemplo, substituir a página completa da conta? Em vez disso, talvez queiramos colocar algumas visualizações abaixo disso, como alguns pedidos anteriores ou até mesmo o perfil do usuário. Para ver isso como um exemplo, vamos voltar às nossas visualizações e criar duas novas visualizações. Copie e cole isso. Uma delas são os pedidos de uso. Basta alterar o texto para ser um pedido. Em seguida, copie e cole este. E isso pode ser atualizar o perfil, alterar o texto, garantir que ambos estejam salvos na visualização do aplicativo. E podemos vincular os dois na parte inferior com um link de roteador. O primeiro será atualizar o perfil e o segundo para nossa nova visão, que são os pedidos anteriores. Conforme mencionado anteriormente, não queremos que esses dois links simplesmente substituam todo o conteúdo adicional acima e sejam exibidos dentro de nossas rotas de visão Em vez disso, como essas duas novas rotas estão vinculadas às nossas contas, pode fazer sentido que ambas, como rotas secundárias dessa conta, tenham esta aparência. Podemos copiar essas duas seções completas e colar isso. Mas, em vez de encaminharmos a conta de barra e, em seguida, o ID do usuário vinculamos para atualizar nossos pedidos anteriores Isso parecerá semelhante, mas este seria um pedido de redução direta Salve isso e acesse nosso índice de roteadores, onde você pode importar nossas duas novas visualizações Duplique isso duas vezes. Este é o perfil de atualização, cubra isso e adicione-o ao caminho. E o segundo é para pedidos de uso. Isso agora nos deixa em uma posição em que temos duas novas rotas para lidar. Temos um caminho, que será contas de barra progressiva e, em seguida, barra progressiva Queremos pegar o ID do usuário, então queremos usar os dois pontos para isso Podemos paralisar isso dentro de uma variável e, em seguida, atualizar com barra frontal A segunda que você deseja manipular é a mesma, ordens de barra invertida Uma opção é criar dois novos objetos de rota aqui para esses dois URLs. Isso, no entanto, não é o ideal porque, como já falamos, qualquer uma dessas novas visualizações substituirá a página da conta. Mas queremos que sejam colocados lá dentro. Para lidar com isso dentro do objeto de rota da nossa conta, podemos adicionar uma matriz de filhos. Essa matriz de filhos declarará quais componentes devem ser aninhados dentro dessa página de conta de nível superior É assim que fica logo após nossos componentes serem colocados na matriz de filhos. Cada uma dessas crianças é um objeto que vai percorrer o caminho e também o componente. Tudo o que precisamos fazer é adicionar uma atualização futura. Mas, em vez de adicionar isso no nível superior, adicionamos isso dentro do caminho filho. Quando chegarmos a esse URL, exibiremos o componente que é o perfil de atualização separado por vírgula Também podemos fazer pedidos encaminhados que renderão nossos pedidos de uso. Temos duas rotas resolvidas e agora podemos removê-las. Isso já deveria estar. Agora, para testar isso, temos dois novos links na parte inferior. Clique em Atualizar perfil, podemos ver imediatamente. Iremos para Fold account e, em seguida, dobraremos o ID do usuário, que é esta seção aqui. Em seguida, dobre a atualização também. Vamos testar os pedidos anteriores. Clique aqui, novamente, a mesma conta, o ID do usuário e, em seguida, os pedidos dobrados são adicionados ao final. Ok, você pode estar pensando, ótimo. Na visualização da conta, podemos ver esse texto à esquerda, mas não vemos nenhuma referência aos nossos dois componentes filhos. Bem, para isso, precisamos dizer ao VGS exatamente onde queremos que esses componentes sejam exibidos Se entrarmos na visualização da conta, o roteador de visualização não tem ideia de onde queremos exibir isso dentro do modelo. Precisamos contar isso adicionando uma visão adicional do roteador. Ok, vamos acessar nossas contas sem nenhum conteúdo adicional. Abaixo, clique em Atualizar perfil. Vemos esse texto de Atualizar perfil, que está aqui. Por fim, clique em Pedidos anteriores. Aqui está o texto dos nossos pedidos, que configuramos aqui. Ambos agora são exibidos dentro da rota de visão de nossa conta. A formatação parece um pouco estranha no momento por causa do CSS Na verdade, provavelmente podemos ver isso um pouco melhor se examinarmos os ativos de origem. Podemos remover todo o estilo daqui. Agora deve parecer um pouco mais claro. Temos a página da conta na parte superior e, em seguida, não usamos nenhuma rota de visão logo abaixo. Podemos então ver nossas rotas infantis aninhadas. 6. Roteador de classes: seguir, veremos as classes ativas e como roteador View JS as aplica automaticamente aos nossos links. Se você olhar de perto, atualmente estamos no link inicial e ele tem uma cor um pouco mais escura Clique no usuário. Essa cor mais escura agora deve ser aplicada ao usuário Isso acontece para cada um dos nossos links. Isso é útil se quisermos ajustar o estilo de qualquer um dos nossos links e informar ao usuário em qual rota ele está atualmente A forma como isso acontece é entrar nas ferramentas do desenvolvedor, clicar com o botão direito do mouse e inspecionar, mantendo a guia de elementos e usando o inspetor para clicar em um de nossos links Atualmente, estamos na rota de casa. Se dermos uma olhada na classe, podemos ver que esse é o link do roteador ativo. E também uma segunda classe de link de roteador exatamente ativa. No momento, isso não está em nenhum dos links a seguir, mas se clicarmos no usuário, essas classes agora serão movidas para o link do usuário. O mesmo vale para a conta, este é o link da nossa conta. E eles não são mais aplicados aos dois primeiros. Mas algo diferente acontece se clicarmos em Atualizar perfil. Como nos links anteriores, o perfil de atualização mantém as duas classes adicionais de link de roteador ativas e também o link de roteador exato ativo. No entanto, a diferença é que essa seção de conta também tem essa única classe de link de roteador ativa. O mesmo acontece se clicarmos em pedidos anteriores. O link de pedidos anteriores fornece nossas duas classes adicionais. E também a página da conta tem essa única classe adicionada. Em primeiro lugar, essas classes são adicionadas automaticamente pelo roteador de visualização. E isso pode nos permitir atualizar o estilo da página atual Qual é a diferença entre o link do roteador ativo e o link do roteador exato ativo? Bem, a diferença está nessa página da conta. Se você assistiu aos vídeos anteriores, saberá que a página da conta tem o perfil de atualização e os pedidos anteriores aninhados como rotas secundárias A conta nos vincula à conta Forward Slash e, em seguida, ao ID do usuário Se clicarmos em atualizar perfil, o mesmo URL estará em vigor, mas com a atualização no final dos pedidos anteriores, isso também será adicionado ao final. O que acontece aqui é com os pedidos anteriores e com o perfil de atualização. Isso começa com contas de barra direta. Portanto, o link da conta de barra direta aqui é considerado uma correspondência parcial Se algum dos nossos links corresponder parcialmente, ativaremos a classe do link do roteador. Uma vez que isso está tecnicamente ativo no momento. Mas, como o nome sugere com os outros links, a classe do link de roteador exato ativo só é aplicada se houver uma correspondência exata com o ORL. Esse é o caso atual do perfil de atualização. Se clicarmos em Pedidos, este link aqui corresponde exatamente ao nosso URL. Isso também obtém a classe exata e também a mesma para qualquer outro link, clicamos no usuário. Isso não é apenas uma combinação parcial, mas também uma combinação exata. Vemos as duas classes aplicadas. O motivo pelo qual eles têm o estilo que estão é porque, por padrão, quando configuramos o roteador de visualização dentro da visualização do aplicativo, ele aplica algum estilo à seção inferior Se rolarmos para baixo, teremos nossos links de navegação, os elementos A e também uma cor diferente para a classe de link do roteador exata, ativa É assim que podemos adicionar estilo aos nossos links ativos, tanto para uma correspondência completa quanto parcial 7. Páginas de fallback: Também é importante lidar com o que acontece se o usuário acessar a parte errada do nosso aplicativo ou uma página que não existe. Por exemplo, se acabarmos de adicionar alguma coisa ao final disso, essa conta está boa porque temos uma seção dentro de nossa rota para arquivo que lida com qualquer informação variável logo após nossa conta. Mas se substituirmos a seção inteira por algo aleatório, não veremos nenhum conteúdo renderizado em nossa rota de visão Para isso, podemos configurar um componente geral de captura total, como uma página 44, que será exibida se nenhuma outra rota corresponder. Para isso, vamos até nossos componentes e criar um novo arquivo chamado not Found of view. Então, um simples modelo interno aqui está bom, com o título da página não encontrado Ok, para usar isso em nosso roteador, precisamos importar isso na parte superior do arquivo. Importação não encontrada. Isso está em componentes não encontrados. Então, no final da nossa matriz de rotas, vou criar um novo objeto para lidar com isso. Configure isso exatamente como o objeto acima. Devemos traçar um caminho , como sempre fazemos. Mas voltaremos a isso em apenas um momento. Adicionaremos um nome não encontrado e, em seguida, renderizaremos nosso componente. Se você já usou a rota de uma vista dois no passado, costumávamos capturar todas as outras rotas que não correspondiam acima simplesmente adicionando uma estrela Mas agora, usando a versão três da visualização e a rota de visualização quatro, precisamos usar um parâmetro personalizado. Fazemos isso exatamente como os segmentos dinâmicos que adicionamos logo acima. Em vez da estrela, adicionaremos um segmento avançado e, em seguida, um dinâmico que será capturado na variável chamada nome do caminho. Esse nome do nome do caminho pode ser qualquer coisa que você escolher. A diferença entre o View router 2.3 também é que agora precisamos adicionar uma expressão regular que é a estrela. E isso corresponderá a qualquer nome de rota. Agora, se estivermos digitando qualquer URL que não seja reconhecida por nenhuma outra rota, veremos que nossa página não foi encontrada Vamos tentar mais um. Isso é bom. Clique em nossos links reconhecidos e ele ainda renderiza o componente correto Se quiséssemos, também poderíamos acessar qualquer um desses parâmetros inseridos, como essa sequência de texto E podemos fazer isso dentro do componente não encontrado, exatamente como vimos anteriormente. Podemos acessar a rota do símbolo do dólar. Temos acesso ao nome do nosso caminho, que é o mesmo nome que demos dentro do roteador. Mas e se tivéssemos vários segmentos? Se o usuário inseriu algo assim? Podemos ver que o Pam ainda está sendo produzido dentro do modelo No entanto, o roteador exibe isso como uma sequência de texto em vez dois parâmetros separados. Se você quiser dividi-los em vários valores para ter acesso a eles, como esta seção e também esta seção, podemos criar uma matriz de parâmetros para configurar isso Volte para o nosso roteador. Adicionamos um início adicional no final do caminho. Agora, se salvarmos e voltarmos, em vez de termos uma sequência de parâmetros como tínhamos antes, agora temos uma matriz contendo dois valores separados. Isso agora nos dá a opção de usar esses parâmetros individualmente, se necessário. Além disso, o roteador de visualização é muito flexível. Não precisamos ter apenas uma única página não encontrada. Poderíamos ter 44 páginas para diferentes segmentos incorretos. Por exemplo, se fosse admin e o último segmento estivesse incorreto, talvez queiramos mostrar uma página 44 diferente para quaisquer erros relacionados ao administrador. A maneira de fazer isso é voltar para o nosso externo, vamos duplicar esta última seção, Pac Poderíamos então selecionar o administrador do path forward. Então, qualquer seção não reconhecida que for adicionada posteriormente será armazenada em seu parâmetro chamado nome do caminho Ou você também pode renomear isso para ser mais descritivo, se quiser Mas a ideia aqui é simplesmente que o nome do caminho armazenará apenas esse segmento, em vez do URL completo que tínhamos antes. Poderíamos então personalizar nossa página não encontrada para se adequar exatamente a essa rota. Vamos remover este exemplo de antes de entrar, adicionaremos isso dentro do elemento P e diremos que nenhuma página de administração foi encontrada para que possamos gerar nossa seção dinâmica, digamos rota do símbolo do dólar. Em seguida, podemos acessar a propriedade do caminho que está inserida no momento Há nossa mensagem de erro na parte inferior. Este é um exemplo de como podemos criar um único componente de 44 páginas não encontradas. Ou também podemos ser mais específicos e adaptar essas mensagens de acordo com nossa rota específica 8. Navegação programática: Mas agora estamos analisando como podemos alternar entre nossas páginas ou componentes usando o link do roteador. O link do roteador colocará um botão em nossa página, qual podemos clicar para exibir o componente desejado. Mas também há outras maneiras que podemos usar para alternar entre as páginas dentro do nosso aplicativo. Também podemos fazer isso programaticamente em vez de confiar nesses botões Anteriormente, analisamos brevemente o acesso à instância do roteador usando o roteador com símbolo de dólar Isso pode ser acessado dentro do nosso script ou dentro do nosso modelo e nos dá acesso a coisas como parâmetros em nosso código Isso também expõe muitas outras coisas, como a capacidade de navegar usando métodos como push Isso significa que também podemos incorporar a navegação em coisas como nossos métodos no script ou também em qualquer ouvinte de cliques dentro do nosso modelo Por exemplo, vamos colocar em um título de nível um em qualquer lugar dentro do nosso invólucro, direi apenas o título do site. O que podemos fazer aqui é ouvir um clique nesse elemento, onde podemos acessar nosso roteador com símbolos de dólar. E um método chamado push, que nos levará ao local desejado. Se for um título, talvez faça sentido vinculá-lo à nossa URL inicial. Vamos ver como isso funciona dentro do navegador. Vá para qualquer outra página. Está um pouco confuso agora, mas clique no título do site. Em seguida, isso nos leva de volta ao URL inicial. Vamos tentar mais um. Vá até o usuário, clique no título do site e tudo funcionará bem. Além disso, podemos usar o método push e todos os outros métodos que veremos dentro do nosso script. E também a função de configuração, se entrarmos em nossa visão de usuário aqui, também podemos acessar push do roteador e fazer uso disso dentro do nosso script. Vamos experimentar isso. Digamos que enviaremos para qualquer URL criada, como test Então, o que faremos para testar isso é isso dentro de um tempo limite definido, passando qualquer função que será executada após 2 segundos. Então, podemos cortar esse código e colar isso em nosso tempo limite. Vamos até a página e entrar na visualização do usuário. Então, 2 segundos depois, nossa função é executada e somos empurrados para o teste avançado. Isso pode ser útil para empurrar um usuário para a área do balcão após o login, já que também podemos acessá-lo dentro de nossos métodos. Agora vamos remover esse tempo limite definido e também voltar para a visualização de pontos do nosso aplicativo, onde podemos dar uma olhada em outro método chamado replace. Este é um símbolo de boneca, substitua este. Assim como o push do roteador e todos os outros métodos que descobriremos , também podem ser usados dentro da configuração do script. Vamos clicar com segurança na conta ou em qualquer outra página no título do site. Novamente, assim como o método push, também voltamos ao URL inicial. Isso funciona de forma muito semelhante ao método push, mas há uma diferença. Ao navegar dentro do navegador, cada uma das páginas que visitamos é adicionada ao histórico anterior de entradas É assim que podemos usar esses botões de voltar e avançar dentro do navegador. Mas a diferença entre esses dois métodos é que, ao usar o método push, todas essas entradas ainda são adicionadas ao histórico do navegador. No entanto, ao que parece, com o método replace, ele substituirá a entrada atual em vez de adicionar duas. Para dizer isso, vamos atualizar para limpar o histórico. Clique na conta. Agora clique no título do site para nos levar de volta à página inicial. Agora, se clicarmos no botão Voltar, você esperaria ser levado de volta à conta. Não o fazemos, porque essa substituição substituiu a rota anterior em vez de ser adicionada ao histórico. Podemos ver a diferença. Se pressionarmos novamente, atualizaremos, acessaremos a página da conta clicaremos no título do site Mas se clicarmos no botão Voltar, já que todo o histórico é salvo no navegador, ele será levado de volta para a página anterior da conta. Outro método de roteador ao qual temos acesso é o de navegar pelas entradas do navegador, conforme acabamos de aprender. Quando percorremos várias páginas dentro do nosso aplicativo, todas essas páginas são armazenadas em ordem no histórico do navegador. Em seguida, podemos navegar para trás ou para frente por quantas dessas entradas do histórico quisermos. Se quisermos voltar às páginas, ao clicarmos nisso, podemos usar o Router do go passando um valor de menos dois. Vamos experimentar isso. Vamos voltar para a rota inicial. Vamos até o usuário, vamos para a conta, vamos para o Perfil. Agora, dois passos para trás seria nosso usuário, clique no título do site e retornaremos à rota do usuário Se estivéssemos voltando ou avançando apenas uma única página. Também são dois métodos que podemos usar, que são retroceder e avançar , e isso não precisa nenhum argumento passado para isso. Também temos, como seria de esperar, se limparmos o histórico, acessar a conta inicial. Isso nos leva de volta ao item anterior do histórico, que é o usuário. Também há outros métodos de roteador disponíveis. Se estiver interessado em saber mais, você pode encontrar mais informações na página de documentação do roteador de visualização. Mas, por enquanto, esses são alguns dos métodos mais comuns que você pode usar em seu projeto. 9. Agradecimento: Parabéns, você chegou ao final desta aula. Espero que você tenha gostado dessa aula e agora também tenha uma compreensão mais profunda do pacote do roteador de visualização e do que ele pode fazer pelos seus projetos do View GS. Agora sabemos que o roteamento nem sempre é tão simples quanto escolher um link e redirecionar para Abordamos muitos dos pacotes de roteadores de visualização, recursos como a transmissão de informações entre rotas. Usamos cadeias de caracteres de consulta, usamos parâmetros. Usamos rotas dinâmicas para nos permitir usar variáveis dentro de nossos URLs. Falamos sobre como configurar a navegação aninhada, como aplicar estilos a vários estados de links e muito mais Então, um grande obrigado por eu dedicar seu tempo para assistir a esta aula. Espero que tenham gostado e nos vemos em outra aula em breve.