Introducción al Router Vue. js 3 | Chris Dixon | Skillshare
Menú
Buscar

Velocidad de reproducción


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

Introducción al Router Vue. js 3

teacher avatar Chris Dixon, Web Developer & Online Teacher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      2:28

    • 2.

      Descripción general del paquete de configuración y enrutador

      9:25

    • 3.

      RouterLink y RouterView

      8:39

    • 4.

      Parámetros y consultas

      12:39

    • 5.

      Rutas anidadas

      8:02

    • 6.

      Clases de routers

      3:30

    • 7.

      Páginas de reemplazo

      5:18

    • 8.

      Navegación programática

      5:50

    • 9.

      Gracias

      0:49

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

9

Estudiantes

--

Proyectos

Acerca de esta clase

Si eres nuevo en el Router Vue, ¡esta es la clase para ti!

Esta serie trata sobre el paquete de Router Vue.js. En particular, cubriremos Vue 3 y Vue Router versión 4.

Esta clase es para cualquiera con un poco de experiencia en Vue.js (u posiblemente otros frameworks) y que quiera aprender cómo usar el enrutamiento en aplicaciones de una sola página. No se necesita experiencia en router, ¡cubrimos todo desde cero!

Qué se cubre en esta clase: -

  • - ¿Qué es el router Vue?
  • - El papel del router en aplicaciones de página única
  • - Configurarás un nuevo proyecto de Vue.js 3 con Vite
  • - El objeto y configuración de rutas
  • - La diferencia entre los archivos de componentes y de vista
  • - Cambiar de página a otra con RouterLink
  • - El apoyo "para" y trabajo con rutas estáticas y dinámicas -
  • Rutas con nombre
  • - Visualización de páginas con Router View
  • - Accede a la información completa del router y de la ruta actual en la plantilla
  • - Usar el guion con la configuración
  • - Configurar segmentos dinámicos en nuestro objeto de enrutador
  • - Params de URL dinámicos
  • - Pasar y acceder a cadenas de consulta
  • - Crea segmentos de URL dinámicos
  • - Agregar rutas adicionales
  • - Rutas de anidación en otras páginas o componentes
  • - Usa el arreglo de niños
  • - Cómo ver qué clases se agregan automáticamente
  • - La diferencia entre router-link-active y router-link-exact-active
  • - Cómo se agregan las clases con rutas anidadas
  • - Coincidencias de URL parcial y completa
  • - Dónde actualizar el estilo CSS
  • - Cómo manejar a los usuarios que visitan enrutadores o url no reconocidos
  • - Creación de páginas 404
  • - Accede a parámetros no reconocidos
  • - Manejar múltiples páginas alternativas y coincidencias parciales
  • - Acceder a la información de la ruta y el router en el guion y la plantilla
  • - El método vue router push() e inclúyelo en el guion y la plantilla
  • - El método vue router replace()
  • - Historial del navegador -
  • - Navegarás en el historial del navegador con los métodos de router para avanzar, retroceder y avanzar.

¡Gracias por visitarte, y espero que disfrutes de la clase!

Conoce a tu profesor(a)

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

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

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

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

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

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

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

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.