Transcripciones
1. Introducción: Oye, bienvenido a esta clase
todo sobre el enrutador de vista y más específicamente
el paquete que es compatible con la versión de
vista tres, que es la versión View
Router cuatro. El paquete view route
en su núcleo nos
permitirá cambiar entre
páginas en nuestras aplicaciones, pero también hay mucho
más que eso. Esta es una
clase de introducción que incluye
la mayoría de los temas esenciales que
necesitará para comenzar. Comenzamos por el
inicio creando un nuevo proyecto VGS versión
tres con el paquete de rutas cubriendo los requisitos que
necesitamos para ponernos en marcha Luego cubrimos los contenidos, incluyendo la ruta de los archivos, lo que significan todos estos archivos y dónde configurar
las rutas que permiten alternar
entre estas páginas. Continuando,
aprenderás a configurar los enlaces para
cambiar entre páginas, y también descubrirás cómo
tenemos un control total sobre dónde se reproduce el
contenido de la página. Aprenderemos a crear URL de página
dinámicas para que podamos incluir variables como el usuario actual
en nuestras rutas Trabajar con parámetros y cadenas de
consulta
también es importante cuando se cambia entre páginas y el paquete
view router también nos tiene cubierto, lo que nos permite pasar información
entre rutas y también cubrir la extracción de información
pasada a las entradas de formulario. El enrutamiento no
siempre es tan simple como un conjunto de enlaces
que se mapean a cada página. También podemos tener la necesidad ruta
anidada dos y
también la tenemos cubierta En nuestros ejemplos, cubrimos estilo
CSS para aplicarlo no solo
a nuestros enlaces, sino también en función de si la ruta
actual está activa. Cubrimos
las páginas de retroceso y cómo habilitar el enrutamiento dentro de
Javascript. ¿Quién soy yo? Mi nombre es Chris,
y he estado involucrado en el desarrollo web desde muy joven y
también he estado enseñando línea y en persona
durante más de una década. Yo uso GS y la ruta
en mis propios proyectos. Tengo experiencia de primera mano, aunque el conocimiento de ViewGS no
es estrictamente requerido, un poco de exposición a esto
realmente te ayudará a entender esta clase ya que no
cubrimos la parte de vista con ningún gran
detalle Si viene de un marco de
front-end diferente , como react, también
debería estar bien
para seguirlo. Por último, les agradezco por tomarse el tiempo para
ver esta clase y espero que la
encuentren útil para aprender el paquete view
router.
2. Descripción general del paquete de configuración y enrutador: Bienvenido a la serie
donde vamos a echar un
vistazo al paquete de rutas de
vista. En particular echaremos un
vistazo a cómo agregar el router y hacer uso de él usando la versión
view free. Si nunca antes has usado
un router en ningún otro framework
o librerías, es básicamente un paquete
que podemos usar para cambiar entre
páginas de vistas. ¿Por qué necesitamos un paquete para
hacer esto en primer lugar? Bueno, generalmente, al crear aplicaciones o
sitios web con UGS, estamos construyendo algo llamado una aplicación de una sola página Una aplicación de una sola página
puede sonar bastante engañosa. No significa que nuestro sitio web
sea solo una sola página. Lo que significa es
detrás de escena, cuando visitamos por primera vez
un sitio web o una aplicación, generalmente
se descarga
un solo archivo Javascript. Este es un gran paquete de Javascript que
proviene del servidor. Luego, en el front-end,
necesitamos manejar cómo necesitamos cambiar
entre varias páginas o componentes en este paquete utilizando tecnologías
web
más tradicionales como Php o Ruby on Rails. Lo que generalmente hacemos
al hacer clic en diferentes páginas o enlaces de
navegación, esto solicitará una nueva
página al servidor. Pero con aplicaciones de una sola
página, ya
tenemos todos los scripts
Java incluidos La primera solicitud,
necesitamos cambiar entre estas diversas partes cuando se
trata de un paquete de enrutador, como el enrutador de vista. Sin embargo, no se trata solo de cambiar
entre páginas. Generalmente hay
muchas más características que podemos descubrir también, y veremos muchas de estas a
lo largo de esta serie. El paquete View Router también
es oficialmente apoyado y mantenido
por el equipo principal de View GS. Está profundamente integrado,
apoyado y actualizado. Si quieres mantener
las cosas realmente simples, también
hay un enlace CDN que puedes usar
para el enrutador de vista Pero para esta demostración, voy a hacer
uso de una herramienta de compilación. Voy a hacer uso
del paquete Vt. Vt efectivamente nos
va a permitir
andamiar o crear una nueva aplicación de vestido de
vista Y nos dará muchas características
agradables como reemplazos de módulos
calientes, que
actualizarán automáticamente el navegador Cada vez que hagamos cambios nuestro proyecto
sin hablar más, seguiremos
creando un nuevo proyecto. Para ello, voy a hacer
uso del código de Visual Studio. Salta a la terminal, que está construida aquí. Podemos ver en la documentación de
VGS. Para crear una nueva aplicación de
vista, necesitamos usar MPM a la vista A más tardar, debes
asegurarte de tener instalada la versión
más reciente o una versión actual
del nodo JS. Puedes probar esto escribiendo
MPM v para la versión en, actualmente
está en la versión ocho Entonces podemos usar el comando
CD para cambiar
a cualquier directorio al que
quieras moverte. En mi caso,
voy a cambiarme
al escritorio para
instalar este proyecto. Y entonces podemos ejecutar
el comando init. Esta es la vista MPM a más tardar. Lo conveniente de crear un nuevo
proyecto view free es que
también podemos instalar el
paquete view router en esta etapa. Si necesitamos instalar algún paquete
adicional,
está bien. El nombre del proyecto acaba de decir
ver enrutador. ¿Un mecanografiado No, no necesitamos a JSX. Podemos agregar el
router de vista porque ese es el propósito
de la serie. No necesitamos ninguna
gestión estatal ni pruebas. Bien, y abramos
esto dentro del código de Visual Studio,
arrastremos esto adentro. También es posible que deba
volver a abrir la terminal. Y a partir de aquí, justo antes
de seguir adelante, necesitamos ejecutar MPM install para instalar todos los paquetes
no que necesitamos ¿Bien? El último paso
que necesitamos es MPM run dev para ejecutar nuestro servidor de
desarrollo Para que podamos ver nuestro proyecto
dentro del navegador. Copia este enlace o haz clic en comando y control
para abrir esto. Ahora hemos creado con éxito
un nuevo proyecto gratuito de vista. Una de las cosas que notarás instantáneamente
si instalaste la ruta de visualización en esta etapa es que
tenemos dos enlaces entre los
que alternar. Tenemos el enlace de inicio
y también la página acerca de. Tenemos algunas
funcionalidades de enrutamiento lista para usar, pero también necesitamos
agregar nuestras propias rutas y nuestras propias características también. Echemos un vistazo
detrás de escena y veamos cómo sucede esto. Si entramos en la carpeta fuente, en la carpeta del router,
tenemos este índice. Verás en la parte superior
de este archivo ya tenemos instalado
el
paquete view router que agregamos esto cuando
configuramos el proyecto. Esto es importar dos
cosas de este paquete. El primero es Crear enrutador, que puedes ver justo aquí. Esto crea un nuevo objeto router con todas nuestras rutas
y configuración. Puedes ver dentro,
podemos elegir entre historia o
también podemos configurar el modo hash. Y echaremos un
vistazo a esto más adelante, pero probablemente el tiempo en el que
pasarás la mayor parte del trabajo con el router esté dentro
de esta matriz de rutas. Si echamos una mirada privilegiada aquí, cada una de nuestras rutas
se configura como un objeto. Para el más simple aquí, configuramos una ruta de archivo. Y este es solo
el directorio home. Este es el que
vemos cuando simplemente
vamos a la URL de nuestro proyecto. Este es un nombre o
un alias que
le damos a cada una de
estas rutas y podemos referirnos posteriormente cuando configuremos nuestro componente de enlaces,
que queremos mostrar. Cuando estamos en esta página, hemos importado algo
llamado la vista de inicio. Podemos ver en la
parte superior, esta vista de inicio es extraída de
la carpeta views. Echa un vistazo a la barra lateral, abre las vistas y tenemos nuestra
casa y nuestra vista sobre. Si abrimos alguna de estas dos rutas de
vistas dentro de aquí, nos pareceremos bastante
familiares si has hecho algún trabajo con VGS en el pasado y estas están configuradas exactamente igual que un componente GS de vista
regular Tenemos la plantilla que
agrega nuestro código HML a la página. Podemos tener una sección de
estilo opcional, y también podemos tener
una sección de guión dos. Estos se ven exactamente igual nuestros componentes, que
podemos ver aquí. La única diferencia en
términos de estructura es que los estamos organizando
en una carpeta de vistas. Sabemos entre cuáles necesitamos alternar
con el router. Solo para aclarar, un
componente puede ser cualquier pieza o cualquier sección
individual de nuestra página, pero nos aseguramos de que nuestra carpeta
views contenga las rutas entre las que
desea cambiar
con el router. De vuelta a la página de índice de ruta, podemos desplazarnos hacia abajo y ver
nuestro segundo objeto router. Esto tiene el camino a
seguir recorriendo. También podemos escribir esto, es enter, y luego
tomamos en la página acerca de. Esto también tiene un nombre de enrutador, pero la diferencia entre
nuestras dos rutas aquí es la primera referencia
directa a componentes y la segunda está haciendo algo
llamado importación. Como podemos ver aquí,
tenemos algunos comentarios arriba. Esto nos está diciendo
que en lugar importar
directamente
nuestros componentes, incluyendo esto con el
resto del paquete, estamos segregando
nuestra opinión acerca de Así podemos hacer uso de
algo llamado carga perezosa. Esta es una de las
otras características del paquete view router. También es capaz de
esta carga perezosa. Como se mencionó anteriormente,
cuando visitamos por primera vez una aplicación de una sola página
y escribimos la URL, esto descargará el paquete completo de
Javascript del servidor. Sin embargo, aunque a veces
no queremos este gran paquete, podría ser una aplicación realmente
grande. Lo que podemos hacer
en lugar de tener un solo
archivo de script jar es que podemos dividirlos en archivos separados. Esto es lo que ha pasado aquí. Hemos segregado la
vista sobre en un archivo separado. Esto solo se descarga
del servidor cuando hacemos clic
en el enlace about. Si quieres, también podríamos cambiar para ser un
componente regular igual que arriba, digamos Acerca de la vista. También necesitaríamos importar
esto igual que arriba. Importaremos la vista acerca de. Esto es junto a la vista del hogar. Sólo tenemos que cambiar el nombre. Di esto. Vt
actualizará automáticamente la página. Todavía podemos alternar
entre estas dos rutas. Por último, necesitamos incluir este router dentro
de nuestro paquete view. Entonces exportamos esto en la parte inferior y luego
al archivo principal. Este archivo de
enrutador exportado se importa a nuestro archivo Javascript
principal. El resto son vistas regulares. Creamos una nueva aplicación View
GS, que se almacena dentro de la aplicación. Entonces podemos agregar este paquete de
enrutador a nuestra aplicación antes de que
luego sea montado en el dom.
3. RouterLink y RouterView: Anteriormente configuramos
un proyecto view free. Instalamos el paquete
view router. Nos fijamos brevemente en
las opciones del router. La página de índice del enrutador
tiene su pase dentro de nuestros objetos de ruta que se mapean
a un componente en particular. Por ejemplo, fold about renderizará esta vista
llamada Acerca de la vista. Podemos ver esto si miramos nuestros dos enlaces aquí
por encima a la derecha, cambiamos entre nuestros dos puntos de vista. Pero actualmente, todavía puede
haber un poco de misterio detrás de
cómo exactamente ambos enlaces están
cambiando estas URL. Esto se debe a que estos dos
enlaces se están agregando por defecto cuando
configuramos nuestro proyecto Echemos un vistazo
detrás de escena y veamos cómo podemos configurarlos nosotros mismos y también agregar otros
adicionales
para este proyecto. Nuestros enlaces
se han configurado automáticamente en la vista de la aplicación, pero también pueden vivir
en cualquier otro componente. Dos, podemos ver en la parte superior, necesitamos importar algo
del paquete view router. Y eso es algo
que necesitamos es un componente de enlace de enrutador. Este es todo el código que hemos visto. En el lado izquierdo, tenemos el logotipo de la vista,
que se ve aquí. Tenemos los
componentes Hello World con el mensaje. Entonces tenemos nuestros dos enlaces de navegación. Abajo en la parte inferior aquí, haremos uso de los componentes
del enlace del enrutador que importamos
del paquete view router. Puedes ver que esto tiene
un atributo llamado 22 es la ubicación a la
que queremos
enlazar cuando se hace clic en este y tenemos el texto de home y sobre qué enlaces
a estas dos URL También te estarás preguntando
por qué no solo usar el HML normal un elemento para
enlazar entre páginas interiores Aquí podemos hacer uso
de una diagonal hacia adelante o también podríamos
decir sobre, bueno, se prefiere usar
el enlace del enrutador sobre
los elementos tradicionales A cuando se usa view GS
por múltiples razones Una de las grandes
diferencias es cuando estamos usando el modo historial
como lo estamos actualmente, el paquete view router necesita
interceptar el clic desde
cualquiera de estos enlaces y evitar que el navegador actualice
la página, lo
que hace automáticamente Cuando se utiliza la vista GS o una aplicación de una
sola página. No necesitamos esta actualización de página ya que automáticamente
tenemos todo el código jarvscript disponible en el paquete que
podemos cambiar entre Vamos a quitar esto. Además, al
igual que una nota al margen rápida dos, si usa el
paquete de enrutador view basado en la vista dos, es posible que haya usado la etiqueta prop que se ve así. Solíamos usar esto para establecer exactamente qué tipo de elemento
HML queríamos
que se renderizara, pero esto ya no está disponible
para usar en este paquete Además, al usar route to link, no solo
estamos
limitados a pasar una cadena estática a nuestros dos
prop tal como estamos aquí. También podemos pasar cualquier
dato dinámico que desee. Por ejemplo, podemos
tener un usuario y querer vincularnos a un ID de usuario
en particular. Vamos a nuestro guión. Vamos a configurar una
constante llamada user, que va a ser un objeto. Pero antes de hacer esto,
envolveremos esto en ref. Necesitamos importar ref desde el paquete view si
no has visto esto antes. Esta es una función de vista
libre, lo que significa que todos los contenidos dentro se mantendrán reactivos. Y por lo tanto, cualquier componente que se base en estos datos
se actualizará cada vez que haya
un cambio a partir de aquí, podemos pasar en nuestros datos como un objeto y
diremos algo así como nombrar el ID de usuario. Dado que estamos haciendo
uso de la configuración del script, nuestro usuario será
devuelto automáticamente de nuestro script y puesto
a disposición para su uso. Sin plantilla. Podemos abrir esto en
los dobles de llaves, hay un dato que necesitamos, pero también podemos hacer uso de
esto dentro de los dos prop Duplicemos esto,
echaremos un vistazo a un ejemplo. Todavía necesitamos comillas dobles
para rodear todo esto, pero podemos hacer uso
de los
bácticos de Javascript para introducir variables
Javascript. Es posible que queramos ir a algo
como usuario de slash forward. Luego usando el símbolo de dólar
y las llaves, podemos sacar nuestros
datos dinámicos como nuestro ID de usuario Digamos usuario. Pero si tuviéramos que subir al
navegador y probar esto, esto provocaría un
problema. Vamos a probar esto. Haga clic en el usuario.
Dentro de esta clave de enlace, vemos el ID de usuario en
lugar del valor dinámico. Simplemente nos gusta con cualquier
otra cosa en View free, cuando estamos usando datos dinámicos, también
necesitamos usar la
sintaxis V bind, que es dos puntos. Y esto le dice
a View GS que no renderize esto como una cadena, sino que tome en cuenta los valores
de los disponibles que pasamos dentro ahora
si hacemos clic en el usuario Esto incluirá ahora los datos
dinámicos que necesitamos. Esto empieza a
darnos una idea de la flexibilidad que tenemos
con el router de vista. También podemos extender aún más
pasando en un objeto. Nuevamente, ya que estamos haciendo uso de datos
dinámicos o Java Script, necesitamos incluir los
dos puntos para eliminar esto. Podemos entonces nuestra cadena pasando el
objeto Javascript. Es de lo más sencillo. Este objeto Javascript
puede contener simplemente la ruta que acabamos de
mirar, slash hacia adelante Lo mismo para el link about, pasando un objeto por el camino, pero éste estaba adelante sobre. Esto aún debería funcionar
exactamente igual que antes. Veremos cómo
funcionan dos enlaces en la parte superior. W habría deletreado
esto correctamente. Esto funciona bien, pero esto
es solo un ejemplo simple, y no tenemos ninguna funcionalidad
adicional de lo que teníamos antes. Pero en cambio podemos pasar a
este objeto una referencia a los nombres que ya
dimos a estas rutas
en el archivo del router. Si recuerdas
del video anterior dentro de la página de índice de routers, cada una de estas rutas tenía un nombre único propiedad
que teníamos en casa y sobre. Podemos referencias
dentro de nuestro objeto, éste pasando
el nombre de casa. De hecho, esto era que
los casos menores deben coincidir. Y también por aproximadamente,
probemos este. Quizás te estés preguntando
por qué hemos hecho todo este esfuerzo cuando
funciona exactamente
igual que originalmente. Bueno, una de las razones
y uno de los beneficios de usar nombre es la re, usabilidad. Si piensas en
esto, si tuviéramos esto sobre nosotros enlace de enrutador
en múltiples ubicaciones en nuestro proyecto y
luego algún día podemos decidirnos en lugar de tener el enlace para ser slash
hacia adelante, posible que
queramos
cambiarlo a algo como slash hacia adelante sobre Bueno, en lugar de
entrar en cada una de nuestras vistas o componentes
y cambiar este enlace, todo lo que tenemos que hacer es entrar en nuestro archivo de router y cambiar
la ruta a sobre nosotros. Este nombre seguiría
siendo relevante y seguiría funcionando en
todos nuestros componentes. Eso es solo cambios de nuevo. Bien, lo siguiente por
descubrir es algo que se
llama Ruta de la Vista. Hemos descubierto cómo
podemos cambiar entre nuestras páginas usando el
enlace del enrutador, que tenemos aquí. Pero también hemos importado
algo llamado Ruta de visión. Esta ruta de visión
es
responsable de renderizar nuestra
página en la pantalla. Dentro de la app, tenemos
esta sección head, la
cual, por
el estilo predeterminado, ha colocado
sobre la izquierda. Después a la
derecha, se muestran los contenidos de nuestras dos vistas. La razón por la que esto sucede
es porque hemos colocado la ruta de visión en la
parte inferior de este archivo. Esta es la salida
de nuestro contenido. Por ejemplo, si
quisieras quitar esto y colocarlo en
una ubicación diferente, ahora
se mueve hacia la izquierda. Esto nos da la flexibilidad
total de donde renderizamos el
contenido de nuestras páginas.
4. Parámetros y consultas: El paquete view routes
también tiene mucho más que
ofrecer que solo cambiar
entre componentes. También se puede utilizar para pasar datos en forma de params y también consultar cadenas a
cuando se trabaja con URL's, igual que estamos aquí, actualmente
estamos trabajando con el home y el
forward about link También es posible que queramos agregar
datos
adicionales como
Pam, al igual que un usuario. Y muchas veces es posible que queramos piezas
de información adicional, como consultas, URL pasadas, estas tienen un signo de
interrogación como este. Y luego veremos
alguna
información adicional como esta. Ahora queremos
echar un vistazo a cómo podemos trabajar con ambos parámetros, consultas dentro
del router de vista Pasemos a nuestra vista de aplicaciones donde tenemos nuestros
dos enlaces de enrutador. Primero echaremos un vistazo a los
parámetros o parámetros que son como variables para una
ruta dada en el enlace del enrutador Podemos agregar estos dentro
de nuestros dos prop. Recuerde que antes miramos agregar variables tal
como las teníamos aquí. Y este es el ejemplo
comentado. Lo que queremos hacer es
eliminar el nombre de ruta. De hecho, solo comentaremos esto y
luego duplicaremos esto. Entonces vamos a mantener
esto completamente intacto. Podemos establecer el camino tal como
lo habíamos hecho antes. Esto va a vincularse a
un ID de usuario en particular, que hemos almacenado
en este objeto. La ruta, ya que estamos
usando variables, podemos establecerlas
con los bácticos. Diremos usuario reenviado, entonces es posible que queramos
tener el ID de usuario como lo tenemos aquí usando lugares de script de
trabajo con cambios
de ID de
usuario en el enlace de usuario. Entonces podemos ver que tenemos
este enlace de usuario ahora actualizado. Y si hacemos click sobre esto,
veremos a nuestro usuario. Y luego la variable
que es justo después, este es nuestro ID de 1234, pero actualmente no tenemos un componente
correspondiente para renderizar. Lo que vamos a hacer es
cambiar la vista acerca de, diremos vista de usuario.
Estamos cambiando esto. También tenemos que ir
a nuestro router. Y luego el índice JS, cambiaremos la
vista acerca de, la vista del usuario. Esto también se está actualizando aquí. El segundo componente,
el nombre del usuario. Ahora también necesitamos cambiar
esto para ser usuario de barra diagonal hacia adelante. Ahora bien, si hacemos clic en
esto, seguiremos viendo, pesar de que poseemos un usuario de barra diagonal
directa, que tenemos un problema
dentro de la consola No tenemos coincidencias
para el usuario de barra diagonal hacia adelante, luego reenviar nuestro ID de usuario Esto se debe a que no
estamos tomando en cuenta la
URL completa Con esta ruta, vamos a
tener una variable que podríamos si quisiéramos sumar forward 1234, mantener
esta dura codificada. Y luego vemos que nos llevan a la página acerca y
cambia a página de usuario, es consistente,
todavía podemos ver que nos llevan
a la página correcta. Pero el problema que podemos tener es si tenemos un ID de usuario diferente, si tenemos a alguien más login, esta ruta no
va a ser encontrada. En cambio, necesitamos
poder capturar cualquier URL diferente que se agregue y tratar efectivamente
esta sección como una variable. La forma de hacer esto
en la página de
índice de enrutadores es en
lugar de tener un valor
codificado duro como este, podemos usar los dos puntos para capturar el valor dentro de una
variable llamada ID. Ahora el paquete view router ahora entiende
que esta sección, o este segmento de la URL
es una variable y podría cambiar y seguirá
renderizando nuestra vista de usuario. Ahora podemos escribir
cualquier cosa que queramos, y esto siempre se muestra. Lo siguiente a pensar
es ¿cómo podemos obtener esta información de usuario en
nuestra página o componentes? Bueno, si pensamos en esto,
si se trata de un usuario y queremos
agarrar el ID de usuario único, posible
que queramos mostrar este o algo así como el
nombre de usuario en los componentes. La forma de hacerlo es usando este nombre de variable que
dimos dentro de la ruta. Recuerda que hemos llamado a esta identificación. Si vamos a la vista de usuario, podemos acceder a la información de
ruta actual dentro los calibrados dobles
usando ruta de símbolo de $1 Di esta actualización. Podemos ver que se muestra toda la información
de ruta
actual. Tenemos la ruta completa que es exactamente lo que vemos
dentro de la barra de URL. Tenemos el nombre que
configuramos en el archivo del router. También tenemos los params
donde podemos ver el ID actualmente está
coincidiendo con lo que tenemos aquí Así es exactamente
como podemos acceder a esta información de identificación
dentro de nuestro componente. Actualmente estamos
mostrando la ruta. Dado que este es un
objeto, podemos decir dopAMD para capturar este
valor el cual se ingresa Vamos a probar esta ruta. Peramsd. Ahora cualquier valor que agreguemos en su segmento ID se va a mostrar dentro
de la plantilla. También, al igual que una nota al margen dos. Además de usar la ruta de símbolo de
dólar, también
podemos acceder al enrutador de símbolo de
dólar. Esto nos da un
poco más de información sobre todas las características
del enrutador. Podemos ver cosas como las opciones donde tenemos establecido
el modo historia. Podemos ver la ruta actual. Podemos ver todas nuestras rutas
que se configuran como una matriz. Aquí tenemos el hogar y también la segunda ruta
que es nuestro usuario. Esta es la misma información de
ruta que hemos configurado dentro de
nuestra página de enrutador. Una vez más,
el enrutador de símbolo dólar
le dará más información sobre
el paquete completo del enrutador. La ruta del símbolo del dólar solo
mostrará información sobre la
ruta actual que estamos visitando. No siempre es así como
queremos ir si queremos
acceder a variables o
información en nuestra plantilla. También es posible que queramos
incluirlos en nuestro script Jar. A la forma en que podemos hacer esto si estamos usando
la API de composición, que actualmente
somos, Digamos que tenemos
un script y haremos
uso de script configurado. También podemos importarlos desde la ruta de uso del paquete del router. Podemos ver aquí por
la información, este es el equivalente a la ruta del
símbolo del dólar que acabamos de usar. Esta es toda la
información nuestra ruta actual incluyendo
los params si quisieras También podría
importar el uso del enrutador. Este es el equivalente al enrutador
de símbolo de dólar. Queremos importarlos desde
el paquete view router. Entonces accedemos a estos
tal como lo haríamos con cualquier otro
componible a la vista Usamos route, los llamamos como una función y almacenamos el valor de retorno
dentro de una variable. Digamos que la ruta cont
es igual a esto. Entonces si duplicamos esto, también
podemos acceder al lugar
del router. En una ruta de registro de consola nos apresuramos y podemos
ver que la información se coloca dentro
de nuestro objeto de etiqueta. Tenemos el nombre, los params, las consultas que
vamos a ver pronto,
el camino completo en el que
nos encontramos actualmente Ahora somos libres de
usar cualquier pieza de esta información
dentro de nuestro código. También vale la pena señalar también, puedes tener múltiples segmentos
dinámicos dentro de la URL así como esto. También se podría decir adelante e insertar una nueva
variable insider aquí. Entonces todo lo que necesitas
hacer es ir a la página de índice de routers y configurar una nueva variable para
capturar esta información. Ahora esto estará disponible
usando este nombre. Además de esto,
el enrutador de vista
también puede manejar cadenas de consulta. Dos, si no has usado
una cadena de consulta antes, obtienen una forma de pasar alguna
información adicional en una URL, tal como vimos desde el principio. Es posible que hayas visto una URL
que se ve así. Volvamos a nuestra
primera URL o a nuestra URL de inicio. Es posible que veas algo que se ve así con
un signo de interrogación. Y entonces podemos decir que el usuario es igual a cualquier cadena
en particular. Entonces podemos agregar múltiples piezas de información separadas por el signo y decir plan
igual a mensual, el nombre Podemos seguir y seguir y
agregar tantos de estos como queramos para que
podamos acceder a nuestro usuario. Podemos acceder a nuestro plan
y podemos acceder a nuestro nombre porque estos están separados después de
este signo de interrogación. Echemos un vistazo a
cómo podemos usar estos. Se
puede acceder a estas cadenas pre localmente o también
se pueden enviar al servidor. Un caso de uso típico para esto
sería con el formulario HTML. Pasemos a ver. Coloquemos en una acción de eliminación de
forma. Como queremos que view
GS se encargue de esto, configuraremos rápidamente un formulario
con un tipo de texto de entrada. El nombre va a
ser igual al usuario. Esta sección de nombres, al
trabajar con consultas, va a ser realmente importante. Veremos esto dentro de
la cadena de consulta. Vamos a montar uno más. Diremos la
ubicación, una entrada, el nombre de la ubicación. Después finalmente un botón para enviar. Esta forma de enviar cualquier texto dentro de aquí
está bien para ver esto. Ve al navegador,
asegúrate de que estamos en la salida del usuario, rellena el nombre, la
ubicación y pulsa Enviar. Puedes ver instantáneamente tan pronto
como hagas esto, separados por un signo de interrogación, Tenemos nuestras dos piezas
de información. Tenemos el usuario igual a Chris y también la
ubicación igual a Reino Unido. Y ambos son
capturados ya que hemos agregado el atributo name a
cada una de nuestras entradas, tanto el usuario como también
la ubicación serán enviados al servidor con
el formulario cuando lo enviemos. Si no sabes nada sobre formularios o envío de
formularios al servidor, no te
preocupes por
esa información. Todo lo que necesitamos saber aquí es con este ejemplo y
al usar formularios, estas consultas o
estas cadenas de consulta agregadas a nuestra URL automáticamente. Pero al trabajar con
el paquete view router, también
podemos agregar estos dos
manualmente y acceder a ellos dentro de todas las
páginas o componentes. Pasemos a nuestra aplicación View, que tiene nuestros enlaces de enrutador. Para este
lo colocaremos dentro del link home, dentro del objeto
separado por una coma, podemos configurar nuestra consulta
que es igual a un objeto Luego dentro de aquí, al
igual que cualquier otro objeto, agregaremos nuestra clave de objeto
y nuestros valores de objeto. Para este ejemplo, vamos a
colocarlo en un token, que puede ser cualquier cadena de texto. También puedes insertar
variables dentro de aquí si quieres dar un guardado. Ahora el acceso es token
dentro de nuestros componentes. Ya que en el enlace de
inicio saltamos a la vista de inicio desde aquí
dentro de los calibrados dobles, Una vez más, podemos acceder a la ruta del símbolo del
dólar para la ruta actual
en el enlace de inicio Esa es toda nuestra información
Y puedes ver dentro de aquí tenemos esta consulta
que es igual a nuestro token. Podemos estrechar esta consulta de ruta
descendente, que nos da nuestro token, y también podemos acceder
al valor con token. Si también echa un
vistazo a la URL, puedes ver cómo se
ha aplicado el token ahora. Esta es una
manera conveniente de pasar pequeñas piezas de información
entre nuestra ruta. Algo como el acceso, los tokens usan ID's o cualquier
pequeña pieza de información.
5. Rutas anidadas: Como se mencionó anteriormente
en estas lecciones, el enrutador de vista es
realmente flexible. Sin embargo, actualmente no
estamos utilizando la flexibilidad total que ofrece. Todo lo que tenemos está dentro
de esta vista de aplicación, tenemos nuestros dos enlaces de enrutador
para cambiar entre nuestras rutas. Estamos afuera poniendo estos dentro de una sola ruta de visión. Esto no es muy flexible. Esto es simplemente
decir que
tenemos nuestros dos enlaces y todo el contenido de cualquier enlace
adicional siempre
estará en
la misma ubicación. Pero cambiemos un
poco las cosas y veamos cómo podemos lidiar con
algunas situaciones diferentes. Vamos a restituir al usuario
una ruta sencilla también. Duplicaremos esto y crearemos el
área de cuenta de usuario dentro de la ruta. Esto todavía va
a ser dinámico, por lo que podemos decir cuenta de reenvío, luego podemos colocar
en nuestro ID de usuario. Tener esto arriba en la
parte superior, entonces es ID de usuario. También necesitamos configurar esto
dentro de nuestro índice de enrutadores. Para esta copia, cualquiera
de estas rutas avanza en nombre de cuenta y también
creará un nuevo componente
llamado vista de cuenta. Recuerda, cambiamos
la sección de usuario para que podamos eliminar los segmentos
dinámicos, pero sí necesitamos agregarlo a
nuestra área de cuenta. Se trata de cuentas reenviadas, seleccionaremos el ID de usuario crea una nueva vista dentro
de nuestra carpeta de vistas. Duplica cualquiera de estos. Esta es la vista de cuenta. Despeja todo esto,
algún texto dentro de aquí. También necesitamos importar
esto dentro de la ruta para
archivar , copiar y pegar Y esta es
la vista de cuenta. Todos deberían estar funcionando bien. Ahora tenemos el hogar, el
usuario, y también la cuenta. Esto también apunta
a cómo usamos ID y mostrar el nuevo componente
que acabamos de crear. Volviendo al
propósito de este video, vamos a
echar un vistazo a las rutas anidadas La idea detrás de
las rutas anidadas es usar estos enlaces. Actualmente, estamos reemplazando
todo este tramo de
la izquierda debido a
nuestra ruta de visión. Pero ¿y si no
quisiéramos,
por ejemplo, reemplazar
la página completa de la cuenta? En cambio, tal vez queramos
colocar algunas vistas debajo de esto, como algunos pedidos anteriores
o incluso el perfil del usuario. Para ver esto como ejemplo, volvamos a nuestras vistas y crearemos dos nuevas vistas. Copia y pega esto. Una son las órdenes de uso. Simplemente cambia el
texto para que sean órdenes. Después copia y pega éste. Y esto puede ser actualizar el perfil, cambiar el texto,
asegurarse de que ambos estén
guardados en la vista de la aplicación. Y podemos vincular ambos hacia abajo en la parte inferior
con un enlace de enrutador. El primero va a ser actualizar perfil y el segundo para nuestra nueva vista
que es órdenes anteriores. Como se mencionó anteriormente, no
queremos que estos dos enlaces
simplemente anulen todo el contenido adicional anterior
y se muestren dentro de
nuestras rutas de visualización. En cambio, dado que
ambas nuevas rutas están
vinculadas a nuestras cuentas, puede
que
tenga sentido que ambas rutas como hijas de esta
cuenta se vean así. Podemos copiar esta
sección completa de dos, pegarla en. Pero en lugar de ir a reenviar cuenta de
slash, luego ID de usuario, luego
vinculamos para actualizar
para nuestros pedidos anteriores Esto se verá similar, pero esta sería órdenes de corte
hacia adelante Guarde esto, y luego vaya a nuestro índice de routers donde
podrá importar nuestras dos nuevas vistas. Duplica esto dos veces. Este
es actualizar perfil, cubrir esto y
agregarlo a la ruta. Y el segundo
es para órdenes de uso. Esto nos deja ahora en
una posición donde
tenemos dos nuevas rutas que manejar. Tenemos un camino, que serán las cuentas de slash
forward,
y luego forward slash Queremos agarrar el ID de usuario, así que queremos usar
los dos puntos para esto. Podemos estancar esto
dentro de una variable, luego reenviar la actualización de barras El segundo que
quieres manejar es el
mismo, las órdenes de corte hacia adelante Una opción es crear dos nuevos objetos de ruta aquí
para ambas URL. Esto, sin embargo, no es lo ideal porque como
ya hemos hablado, yendo a, cualquiera
de estas nuevas vistas reemplazará a la página de la cuenta. Pero queremos que
estos se coloquen en su interior. Para tratar esto dentro de
nuestro objeto de ruta de cuenta, podemos agregar una matriz de hijos. Esta matriz hijos
declarará qué componentes deben anidarse dentro de
esta página de cuenta de nivel superior Así es como se ve justo después de nuestros componentes coloquen
en la matriz hijos. Cada uno de estos hijos es un objeto que va a tomar en el camino y
también el componente. Todo lo que tenemos que hacer es
agregar actualización hacia adelante. Pero en lugar de agregar
esto en el nivel superior, agregamos esto dentro
del camino hijo. Cuando aterricemos en esta URL, vamos a mostrar
el componente que es actualizar el perfil
separado por coma También podemos hacer pedidos hacia adelante que harán que
nuestros pedidos de uso. Tenemos dos rutas manejadas y ya
podemos eliminar estas. Esto ya debería ser. Ahora para probar esto,
tenemos dos nuevos enlaces en la parte inferior. Haga clic en Actualizar perfil,
Podemos ver inmediatamente. Iremos a Fold account, luego doblaremos el ID de usuario, que es esta sección justo aquí. Después doblar la actualización también. Probemos los pedidos
anteriores. Haga clic en esto, nuevamente,
se agrega la misma cuenta, el ID de usuario, y luego
las órdenes de plegado se agregan al final. Bien, puede que estés
pensando, genial. Nosotros dentro de la vista de cuenta, podemos ver este
texto a la izquierda, pero no vemos
ninguna referencia a nuestros dos componentes hijos. Bueno, para esto,
necesitamos decirle a VGS exactamente dónde queremos que se muestren estos
componentes Si entramos en la vista de cuenta, el enrutador de vista no
tiene idea de dónde queremos mostrar esto
dentro de la plantilla. Tenemos que decírselo agregando
una vista de enrutador adicional. Bien, vayamos a nuestras cuentas sin ninguno de los contenidos
adicionales. A continuación, haga clic en Actualizar perfil. Vemos este texto
de Actualizar perfil, que está justo aquí. Por último, haga clic en Pedidos
anteriores. Ahí está el texto de nuestros pedidos, que hemos configurado aquí. Ambos ahora se muestran dentro de la ruta de
visión desde nuestra cuenta. El formato
se ve un poco extraño en este momento
debido al CSS. De hecho, probablemente podamos ver esto un poco mejor si
entramos en los activos de origen. Podemos quitar todo el
estilo de aquí. Ahora debería verse un
poco más claro. Tenemos la página de la cuenta en la parte superior y luego no usamos ninguna
ruta de visualización justo debajo. Entonces podemos ver nuestras rutas infantiles
anidadas.
6. Clases de routers: A continuación vamos a echar un
vistazo a las clases activas y cómo ver el enrutador JS las aplica
automáticamente a nuestros enlaces. Si miras de cerca, actualmente
estamos en el enlace de inicio y este tiene
el color un poco más oscuro. Haga clic en el usuario.
Este color más oscuro ahora
debería
aplicarse al usuario. Esto sucede para cada
uno de nuestros enlaces. Esto es útil si quisiéramos ajustar el estilo
de cualquiera de nuestros enlaces y hacerle
saber al usuario en qué ruta
se encuentra actualmente. La forma en que
lo hace si entramos en las herramientas del desarrollador y hacemos clic
derecho e inspeccionamos, manteniendo la pestaña de elementos y usamos el inspector para
hacer clic en uno de nuestros enlaces. Actualmente estamos
en la ruta de origen. Si echamos un vistazo a la clase, podemos ver que este es el enlace
del enrutador activo. Y también una segunda clase de enlace de
enrutador exacto activo. Esto no está actualmente en
ninguno de los siguientes enlaces, pero si hacemos clic en el usuario, estas clases ahora se
trasladan al enlace de usuario. Lo mismo para cuenta,
este es nuestro enlace de cuenta. Y ya no se
aplican a los dos primeros. Pero algo
diferente sucede si hacemos clic en Actualizar perfil. Al igual que con los enlaces anteriores, perfil de
actualización obtiene las
dos clases adicionales de enlace del enrutador activas y también el enlace
del enrutador activo exacto. Sin embargo, la diferencia
es que esta sección de cuenta también tiene activa esta clase única
de enlace de enrutador. Lo mismo sucede si hacemos
clic en pedidos anteriores. El enlace de pedidos anteriores obtiene
nuestras dos clases adicionales. Y también la página de la cuenta
tiene esta clase única agregada. En primer lugar, estas clases son
agregadas automáticamente
por el enrutador de vista. Y esto nos puede permitir actualizar el estilo de
la página actual. ¿Cuál es la diferencia
entre el enlace del router activo y el
enlace del router exacto activo? Bueno, la diferencia radica
en esta página de cuenta. Si has visto
los videos anteriores, sabrás que la página de la
cuenta tiene tanto el perfil de actualización como
los pedidos anteriores
anidados como rutas secundarias La cuenta nos vincula a la cuenta de barra diagonal,
luego el ID de usuario Si hacemos clic en actualizar perfil, la misma URL está en su lugar, pero con actualización al
final con pedidos anteriores, esto también se agrega al final. Lo que sucede aquí es
con los pedidos anteriores y actualizar el perfil. Esto comienza con cuentas de barra diagonal
hacia adelante. Por lo tanto, el enlace de la cuenta de
barra diagonal hacia adelante justo aquí se considera
una coincidencia parcial Si alguno de nuestros enlaces
coincide parcialmente, obtendremos la clase de enlace de
enrutador activa. Ya que esta técnicamente
está actualmente activa. Pero como su nombre indica
con los otros enlaces, la clase de
enlace de enrutador exact active
solo se aplica si hay
una coincidencia exacta con ORL Este es el caso actual
para actualizar el perfil. Si hacemos clic en Pedidos, este enlace aquí es una coincidencia
exacta para nuestra URL. Esto también obtiene la clase
exacta y también la misma para cualquier otro
enlace, hacemos clic en el usuario. Esto no sólo es
un partido parcial, sino que también es un partido exacto. Vemos ambas clases aplicadas. La razón por la que estos
se
estilizan como son es porque por defecto, cuando configuramos el enrutador de vista
dentro de la vista de la aplicación, aplica algún estilo
a la sección inferior Si nos desplazamos hacia abajo,
tenemos nuestros enlaces de nav, los elementos A y también un
color diferente para la clase de enlace router exacto, activo. Es así como podemos
agregar estilo a nuestros enlaces activos tanto para nuestros enlaces activos tanto para
una coincidencia completa como parcial.
7. Páginas de reemplazo: También es importante
manejar lo que sucede si el usuario aterriza en la parte incorrecta de nuestra aplicación o en
una página que no existe. Por ejemplo, si acabamos agregar algo
al final de esto, esta cuenta está bien
porque tenemos una sección dentro de nuestra ruta para
archivar que maneja
cualquier dato variable justo
después
de nuestra cuenta. Pero si reemplazamos la
sección completa con algo aleatorio, no
vemos ningún contenido
renderizado en nuestra ruta de visualización. Para ello, podemos
configurar un componente general catch all como una página 44, que se mostrará si no hay
otras rutas coincidentes. Para ello, vamos a
repasar a nuestros componentes y crear un nuevo archivo
llamado not Found of view. Entonces un simple
insider de plantilla aquí está bien, con el encabezado
de la página no encontrado. Bien, para usar esto de
nuevo en nuestro router, necesitamos importar esto en
la parte superior del archivo. No se encontró la importación. Esto se encuentra en componentes no encontrados. Entonces al final de
nuestro array de rutas, voy a crear un nuevo
objeto para manejar esto. Configura esto igual que
el objeto de arriba. Debemos establecer un camino
como siempre lo hacemos. Pero volveremos a
esto en un momento. Añadiremos un nombre no encontrado, luego renderizaremos nuestro componente. Si has usado la ruta
de una vista dos en el pasado, solíamos poder tomar
todas las demás rutas que no coinciden arriba
simplemente agregando una estrella. Pero ahora usando la versión de vista tres y la
ruta de vista de cuatro, necesitamos usar en su lugar
un parámetro personalizado. Hacemos esto igual que
los segmentos dinámicos que agregamos justo arriba. En lugar de la estrella,
agregaremos un segmento forward y luego un segmento dinámico que capturará en la
variable llamada path name. Este nombre de nombre de ruta puede ser
cualquier cosa que elijas. La diferencia entre View
router 2.3 es también que
ahora necesitamos agregar una
expresión regular que es la estrella. Y esto coincidirá con
cualquier nombre de ruta dado. Ahora bien, si estamos escribiendo
alguna URL que no
sea reconocida por
ninguna otra ruta, veremos nuestra página no encontrada. Vamos a probar uno más.
Esto está bien. Haga clic en nuestros enlaces Reconocidos y aún así renderiza
el componente correcto. Si quisiéramos, también
podríamos acceder a cualquiera de estos parámetros
que se introduzca, como esta cadena de texto Y podemos hacer esto dentro
del componente no encontrado, tal como hemos mirado
anteriormente. Podemos acceder a la ruta del símbolo del
dólar. Tenemos acceso a nuestro nombre de ruta, que es el mismo nombre que le
dimos dentro del router. Pero, ¿y si
tuviéramos múltiples segmentos? Si el usuario ingresó
algo como esto? Podemos ver que el Pam sigue siendo salida dentro de la plantilla. Sin embargo, el router
muestra esto como una cadena de texto en lugar dos parámetros separados si quisieras dividirlos en múltiples valores para
tener acceso a ellos, como esta sección
y también esta sección, en su lugar
podemos crear una matriz
de params para configurarlo Salta de nuevo a nuestro router. Agregamos un inicio adicional
al final del camino. Ahora bien, si guardamos y retrocedemos, en lugar de tener una cadena de parámetros como la que
teníamos antes, ahora
tenemos una matriz que contiene
dos valores separados. Esto ahora nos da
la opción de usar estos parámetros individualmente
si es necesario. Además, el enrutador de vista
es realmente flexible. No solo tenemos que tener
una sola página no encontrada. Podríamos tener 44 páginas para
diferentes segmentos incorrectos. Por ejemplo, si esto era admin y el último
segmento era incorrecto, tal vez
queremos mostrar
una página 44 diferente para cualquier error relacionado con el administrador. La forma de hacerlo es
volver a nuestro exterior,
vamos a duplicar esta
última sección, Pac arriba. Luego podríamos seleccionar
el path forward admin. Entonces, cualquier sección no reconocida
que se agregue después, se
almacenará en su
parámetro llamado nombre de ruta O también podrías cambiarle el nombre a esto para que sea más descriptivo
si quisieras. Pero la idea aquí es simplemente que
el nombre de la ruta solo almacenará este segmento en lugar la URL completa que
teníamos antes. Luego podríamos personalizar nuestra página no encontrada para que se
adapte a esta ruta exacta. Simplemente eliminemos este
ejemplo de antes de entrar en, agregaremos esto dentro
del elemento P y diremos que no se encontró una página de
administración para entonces podemos generar
nuestra sección dinámica, diremos ruta de símbolo de dólar. Entonces podemos acceder a la propiedad
path que
actualmente estamos en su entrada, ahí está nuestro mensaje de error
abajo en la parte inferior. Este es un ejemplo
de cómo podemos crear un solo componente de 44 páginas
no encontradas. O también podemos ser más
específicos y adaptar estos mensajes para que se adapten a
nuestra ruta particular.
8. Navegación programática: Pero ahora hemos estado
viendo cómo podemos cambiar entre nuestras páginas o componentes
usando el enlace del enrutador. El enlace del router colocará
un botón en nuestra página, que podremos hacer clic para
mostrar el componente deseado. Pero también hay otras
formas que podemos usar para cambiar entre páginas
dentro de nuestra aplicación. También podemos hacerlo
programáticamente lugar de confiar
en estos botones Anteriormente
vimos brevemente
el acceso a la instancia de enrutadores usando el enrutador de símbolo de
dólar. Esto se puede acceder dentro de nuestro script o dentro
de nuestra plantilla y nos da
acceso a cosas
como params en nuestro código Esto también expone muchas
otras cosas, como la capacidad de
navegar usando
métodos como push Esto significa que también podemos construir en navegación en cosas
como nuestros métodos en el script o también en cualquier oyente de clic
dentro de nuestra plantilla Por ejemplo, coloquemos en un encabezado de nivel uno en cualquier lugar
dentro de nuestro envoltorio, solo
diré título del sitio. Lo que podemos hacer aquí es
escuchar un click sobre este elemento donde podemos acceder a nuestro router símbolo dólar. Y un método llamado push, que nos va a empujar
a una ubicación deseada. Si este es un título,
tendría sentido
quizás vincularlo de nuevo
a nuestra URL de inicio. Veamos cómo funciona esto
dentro del navegador. Ir a cualquier otra página. Ahora está un poco desordenado, pero da
clic en el título del sitio. Esto luego nos lleva de
vuelta a la URL de inicio. Intentaremos con uno más.
Vaya al usuario, haga clic en el título del sitio,
y todo esto funciona bien. Además, podemos hacer uso
del método push y todos los demás métodos
que vamos a ver dentro de nuestro script. Y también la función de configuración
si entramos en nuestra vista de usuario dentro de aquí también
podemos acceder al router push y hacer uso de
esto dentro de nuestro script. Vamos a probar esto. Digamos que vamos a empujar a cualquier
UPRL hecho como prueba Entonces lo que haremos para
probar esto es envolverlo dentro
de un tiempo de espera establecido, pasando cualquier función que
se ejecutará después de 2 segundos. Para que podamos cortar este código, pegar esto en nuestro tiempo de espera. Pasemos a la página
y saltemos a la vista del usuario. Entonces 2 segundos después se
ejecuta
nuestra función y estamos empujados
a la prueba hacia adelante. Esto puede ser
útil para empujar un usuario al
área del contador después de iniciar sesión, ya que también podemos acceder a esto
dentro de nuestros métodos también. Ahora eliminemos este
tiempo de espera establecido y también volvamos a nuestra app dot view
donde podemos echar un vistazo a otro
método llamado replace. Este es
símbolo de muñeca reemplazar esto. Al igual que el router push y
todos los demás métodos que
descubriremos también se pueden usar
dentro de la configuración del script. Demos a esto un clic seguro en la cuenta o en cualquier otra
página en el título del sitio. Nuevamente,
al igual que el método push, también
nos llevan de vuelta
a la URL de inicio. Esto funciona muy similar
al método push, pero hay una diferencia. Al navegar
dentro del navegador, cada una de las páginas
que visitamos se agrega al
historial anterior de entradas. Así es como podemos usar estos
botones atrás y adelante dentro del navegador. Pero la diferencia
entre estos dos métodos es que cuando se usa el método push, todas estas entradas aún se agregan al historial
del navegador. No obstante, como suena,
con el método replace, reemplazará la
entrada actual en lugar de agregar dos. Para decir esto, refresquemos
para aclarar la historia. Haga clic en la cuenta. Ahora haga clic en el título del sitio para
llevarnos de vuelta a la página de inicio. Ahora bien, si hacemos clic en
el botón Atrás, esperarías que te
lleven de vuelta a la cuenta. Nosotros no, porque este
reemplazo ha sustituido la ruta anterior en
lugar de agregarse a la historia. Podemos ver la diferencia.
Si vamos a empujar de nuevo, refrescar, iremos a
la página de la cuenta, haga clic en el título del sitio. Pero si hacemos clic en el botón Atrás, ya que todo el historial
se guarda en el navegador, éste se vuelve luego a
la página de la cuenta anterior. Otro método de enrutador al que
tenemos acceso es, y este navegará por las entradas del navegador como
acabamos de aprender allí. Cuando pasamos por varias páginas dentro de nuestra aplicación, todas estas páginas se almacenan en orden dentro del historial del
navegador. Luego podemos navegar hacia
atrás o hacia adelante a través de tantas
entradas de historia como queramos. Si quisiéramos volver a
las páginas, cuando hacemos clic en esto, podemos usar Router do go pasando un valor de
dos negativos. Probemos esto. Volveremos a la ruta de origen. Iremos al usuario,
iremos a la cuenta,
iremos a Perfil. Ahora, dos pasos hacia atrás
sería nuestro usuario, haga clic en el
título del sitio y estamos volviendo a la ruta del usuario. Si solo estuviéramos retrocediendo
o adelantando una sola página. También son dos métodos que podemos
usar que es atrás y también adelante tienen acceso a forward y esto no necesita ningún argumento pasado a esto. También tenemos, como cabría
esperar, si limpiamos la historia, ir a la cuenta de casa. Esto nos lleva un paso atrás al ítem del historial anterior, que es el usuario. También hay otros
métodos de enrutador disponibles. Si está interesado
en obtener más información, puede obtener
más información en la página de
documentación de ver enrutador. Pero por ahora, sin embargo,
estos son algunos de los métodos más comunes que puedes usar
en tu proyecto.
9. Gracias: Enhorabuena, ya
has llegado al final de esta clase. Espero que hayas disfrutado de
esta clase y también ahora tengas una
comprensión más profunda
del paquete view router y
lo que puede hacer por tus proyectos
View GS. Ahora sabemos que el enrutamiento
no siempre es tan simple
como elegir un enlace y
redirigir a una nueva página Hemos cubierto muchos de
los paquetes de enrutadores de vista, características como el paso de
información entre rutas. Hemos usado cadenas de consulta,
hemos usado parámetros. Hemos utilizado
rutas dinámicas para permitirnos
usar variables dentro
de nuestras URL. Hemos cubierto cómo
configurar la navegación anidada, cómo aplicar estilo a varios estados de enlace
y mucho más Así que un gran agradecimiento de mi parte
por tomarme el tiempo
para ver esta clase. Espero que lo hayas disfrutado y pronto te
veré en
otra clase.