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.
Chris Dixon, Web Developer & Online Teacher
