Post Top Ad

Your Ad Spot

viernes, 11 de septiembre de 2020

Tutorial del enrutador Vuejs

 Enrutador Vuejs

Hemos estado cubriendo mucha información sobre el marco de JavaScript de Vuejs. En este tutorial, echaremos un vistazo al Vue Router, que permite a los desarrolladores crear SPA, o las llamadas aplicaciones de página única. El enrutador es la característica importante de una aplicación de una sola página, ya que sin él no podríamos crear una. En una aplicación de una sola página, solo hay una página. Podría ser solo un archivo index.html, por ejemplo, que aloja una aplicación Vuejs. Esta única página se usa luego para simular la navegación al usuario. Las URL cambian en la ventana del navegador, sin embargo, Vuejs en realidad solo vuelve a representar esta única página index.html a medida que cambia la URL. Esto le da al usuario el efecto de visitar diferentes páginas html, pero en realidad, siempre es la misma página la que se vuelve a renderizar. Con este enfoque, ya no cargamos una nueva página en cada solicitud http al servidor y luego adjuntamos Vuejs a ciertas partes de la página. En cambio, toda la aplicación se maneja a través de Vuejs. Para lograr este enfoque, necesitamos aprender sobre el componente principal de una aplicación de una sola página en Vue, y ese es el enrutador Vuejs.


Configurar el enrutador Vue

Recientemente hablamos un poco sobre componentes dinámicos en Vue, y este tema está relacionado con nuestro estudio del enrutador Vue. En otras palabras, con el enrutamiento estaremos cambiando diferentes componentes en la aplicación para lograr el efecto deseado. Casi puede pensar en cada componente como una página web individual. Sin embargo, antes de llegar allí, debemos configurar el enrutador en nuestro proyecto Vue. Primero, instalemos Vue Router, ya que no está incluido de forma predeterminada con Vue. Continúe y escriba lo siguiente en la línea de comando.

npm install --save vue-router

Una vez que esto se complete, si lo inspecciona package.json, verá una nueva dependencia para el enrutador así:


package.json

¡Excelente! Ahora ha instalado con éxito el enrutador Vue en su proyecto.


Agregue el enrutador y configure algunas rutas

Ahora que tenemos el enrutador instalado, podemos agregarlo a la aplicación y configurar algunas rutas. Entonces, en primer lugar, puede abrir el main.jsarchivo. Aquí haremos dos cosas. Importaremos el enrutador y especificaremos usar el enrutador.


main.js


Configurar el archivo route.js

Podemos colocar nuestras rutas en una única ubicación para una buena organización del código. Podemos crear un nuevo archivo route.js ahora para este propósito.
archivo route-js

En el archivo route.js, podemos exportar una constante que contendrá nuestras rutas. Esta constante contendrá una matriz, y la matriz es una colección de objetos con cada objeto que representa una ruta en particular. Imagina que estás comenzando un sitio web y tienes dos páginas. Cuando visita una URL, se carga una página en particular. Cuando visite una URL diferente, se cargará una página diferente. Aquí, traduciremos esa idea al código de Vuejs.


route.js

PageOne y PageTwo son componentes de Vue que representan una página. En el ejemplo anterior, estamos importando esos componentes al archivo de rutas. Después de eso, podemos ver dos objetos en la matriz de rutas. Cada objeto tiene una ruta y un componente . La ruta representa lo que ve en la barra de URL de la ventana del navegador. El componente es la página (en realidad, el componente) que se carga cuando visita esa URL.


Registre sus rutas

Para utilizar nuestras nuevas rutas, debemos registrarlas en el archivo main.js. Así es como se vería:


main.js


Designar dónde mostrar las páginas (componentes)

Hasta ahora tenemos dos rutas diferentes, y cada ruta mostrará un componente determinado cuando se visite esa URL en particular. En este punto, debemos decidir dónde se renderizarán realmente esos componentes. Estos componentes se procesarán en el archivo App.vue utilizando el componente <router-view> integrado especial que se envía con Vuejs.


App.vue

Con todo esto en su lugar, ahora deberíamos tener dos rutas que funcionarán en nuestra aplicación. Tenga en cuenta que tenemos nuestros dos componentes almacenados en el directorio de componentes así.
dos páginas o componentes

Para saber qué se cargará, los componentes son súper simples. Solo queremos ver cómo funciona el enrutador.


PageOne.vue


PageTwo.vue

¡Visitar las URL proporcionadas nos muestra que el enrutador ahora está funcionando!


http: // localhost: 8080 / # / page-one

vue página una ruta


http: // localhost: 8080 / # / página-dos

vue página dos ruta


Configurar una ruta predeterminada

Tenemos dos componentes que representan dos páginas diferentes en la aplicación y el ejemplo del enrutador Vue los está cargando bastante bien. También deberíamos tener una página de inicio o una ruta predeterminada, por así decirlo. Es decir, si un usuario simplemente carga la URL base de /, entonces deberíamos ver la página de inicio. Primero, podemos crear un nuevo componente llamado Home.vue .
ruta predeterminada vue

Sigamos adelante y completemos el componente Home.vue con un marcado simple.


Home.vue

Ahora podemos agregar la ruta para la página de inicio a nuestro archivo routes.js .


route.js

La carga de la URL de la página de inicio ahora mostrará una bonita página de inicio.
http: // localhost: 8080 / # /
vue página de inicio de ruta predeterminada

¡Se ve bastante bien! Tenga en cuenta que los enlaces aún no están activos, veremos cómo hacer un enlace de enrutador vue en un Vue SPA en solo un momento. Por ahora, estamos emocionados de tener una página de inicio y dos páginas adicionales entre las que podemos navegar en función de la URL que escribimos.


Modo Hash e historial

Es posible que haya notado que se agregó un símbolo de almohadilla (#) a la URL en la sección anterior. Esto lo coloca automáticamente el enrutador Vue. Esta es la configuración predeterminada que utiliza el enrutador Vue. Esto es bastante común en aplicaciones de una sola página. La razón de esto es porque si no hay un símbolo de almohadilla presente, entonces cada vez que un usuario presiona Enter o hace clic en un enlace, esa solicitud se envía al servidor. Así es como funcionan los navegadores de Internet. Sin embargo, el problema con esto en un SPA es que en realidad no queremos enviar la solicitud al servidor. En su lugar, queremos manejar todo el enrutamiento a diferentes páginas en la aplicación de una sola página. Todo esto sucede en el lado del cliente, no se requiere servidor. Por lo tanto, el hashtag se utiliza como una especie de delimitador. Cualquier cosa antes del hashtag es lo que se obtiene del servidor. Entonces, esencialmente, index.html es el único archivo que se sirve desde el servidor. Cualquier cosa después del hashtag es la ruta que debe usar el enrutador Vuejs.


Cómo quitar el hashtag

Tal vez desee eliminar ese hashtag de la estructura de la URL. Si desea hacer esto, puede hacerlo. Simplemente debe habilitar el modo de historial como tal en su archivo main.js.
main.js


Agregar enlaces con <router-link>

Ya configuramos una página de inicio agradable que tiene dos botones agradables en los que el usuario debería poder hacer clic y navegar a una página en particular en el SPA. Esto aún no está configurado, pero ahora activaremos esos enlaces. Para hacer un enlace usando el Vue Router, podemos usar el componente integrado <router-link> . Lo que vamos a hacer es eliminar la propiedad href por completo de nuestras etiquetas de anclaje, simplemente envuelva el texto que queremos para hacer un enlace con el componente <router-link>. Por ejemplo, para enlazar page-one, podríamos usar <router-link to = ”/ page-one”> Haga clic para la página 1 </router-link> y para enlazar page-twopodríamos usar <router-link to = ”/ page- dos ”> Haga clic en para la página 2 </router-link>. Así es como podemos agregar esos enlaces a la página de inicio.


Home.vue

Ahora podemos ver que tenemos enlaces activos para los botones, además del modo historial activado. No hay hashtag en la barra del navegador de URL.
ejemplo de enlace de enrutador vue

¡Muy genial! También tenga en cuenta que cuando hacemos clic en cada enlace, la página no se vuelve a cargar. Esto se debe a que cuando usa <router-link>, hay un detector de clics implícito puesto en acción. Por lo tanto, cuando un usuario hace clic, el comportamiento predeterminado de enviar una solicitud http al servidor no ocurre. En cambio, Vue Router escucha el evento de clic y carga la ruta correcta según sea necesario.


Estilo de enlaces activos

Ahora extraigamos nuestros enlaces a un área de navegación dedicada y configuremos el estilo de los enlaces activos. Este es un diseño muy común y queremos saber cómo hacerlo. Primero, agreguemos un nuevo componente al proyecto llamado Navigation.vue . En este archivo, podemos agregar el siguiente marcado.


Navigation.vue

Por supuesto, también necesitamos importar este archivo a nuestra instancia de App.vue y registrarlo.


App.vue

Echa un vistazo al estilo de enlace activo.
estilo de enlaces activos del router vue

Hay algunas cosas que discutir sobre el estilo de los enlaces activos aquí. Generalmente, intercambiaremos todas las etiquetas de anclaje por completo con las etiquetas de enlace del enrutador. Esto se debe a que cuando usa <router-link> en, en realidad se representa en un <a> en el navegador. En lugar de usar un hrefatributo, usamos el toatributo. Así como podemos aplicar una clase a una etiqueta de anclaje para darle un aspecto agradable, también podemos aplicar una clase a la etiqueta <router-link>. Entonces, como puede ver, aplicamos .nav-linky obtenemos el efecto deseado. Una cosa que ocurre cuando se usa <router-link> es que pierde el puntero típico que vería como cursor. Para superar esto, simplemente aplicamos un estilo en línea de style="cursor: pointer"para mitigarlo. Para diseñar el enlace activo, todo lo que tiene que hacer es aplicar elactive-classatributo a <router-link>. Vue averiguará de forma inteligente qué enlace está activo y, si lo está, se aplicará la clase dada. También puede notar que usamos el exactatributo en el enlace de inicio. Esto es para asegurarse de que la clase activa solo se aplique a la página de inicio cuando la página de inicio esté activa. De lo contrario, el enlace de inicio aparecerá activo incluso al hacer clic en la página uno o en la página dos.


Usando Vue Router Push

Además de navegar con <router-link>, también podemos navegar de manera programática con el push()método del objeto enrutador. Para demostrar esto, podemos agregar un nuevo botón en la página dos que, cuando se haga clic, activará un método en nuestro código que realizará una navegación por nosotros. Cambiemos el marcado del componente PageTwo.vue a lo siguiente.


PageTwo.vue

Podemos ver lo que está sucediendo en el código anterior. En nuestro componente, agregamos un detector de clics al elemento <button>. Por lo tanto, cuando un usuario hace clic en ese botón, pushHome()se llama al método. En elpushHome()método estamos accediendo a la instancia de Vue y luego a la instancia del enrutador como vemos con el prefijo del signo de dólar. Esta es la forma típica de acceder a un complemento de terceros. El signo de dólar nos dice que $ router es un objeto que se proporciona desde otro paquete. Fuera del $ router, podemos hacer esa llamada a push (). Este método nos permite insertar una ruta en la pila de rutas existentes. Esto asegura que los botones de avance y retroceso del navegador seguirán funcionando correctamente. También tenga en cuenta que simplemente pasamos una representación de cadena de la ruta a la que queremos navegar. También puede pasar un objeto como {ruta: '/'} si lo desea. Con eso, ahora sabemos cómo navegar en nuestra aplicación Vue usando <router-Link to = ”/”> y usando el enrutador push método, por ejemplo este. $ router.push ('/'). Aquí está en acción.
ejemplo de inserción de enrutador vue


Parámetros del enrutador Vue

Sabemos cómo configurar rutas estáticas que no tienen ningún dato asociado a ellas. ¿Qué hay de incluir parámetros dinámicos como pasar una identificación única con una ruta? Podemos hacer esto con los parámetros del enrutadorExploraremos eso ahora. Revisemos nuestro archivo route.js y examinemos una nueva adición.


route.js

Observe el : id como parte de la ruta para la página uno. Lo que esto significa es que podemos pasar un dato a esa ruta y recuperarlo usando idCon eso en su lugar, modifiquemos el marcado Navigation.vue solo un poco.


Navigation.vue

Ahora estamos codificando de forma rígida el valor de 17 en la parte de identificación de la ruta de destino. Al hacer clic en esa ruta en particular, ahora aparece en la barra de URL del navegador con la identificación codificada que especificamos.
parámetros del enrutador vuejs


Recuperar parámetros dinámicos

Para obtener un parámetro dinámico de una ruta, puede usar este. $ Route.params. id en el método data () del componente. Veamos cómo podemos mostrar la identificación en la interfaz de usuario de la página uno al visitar esa página.


PageOne.vue

Ahora, cuando visita la ruta de la página uno, la identificación se muestra de hecho en la página.
recuperar parámetros dinámicos enrutador vue


Rutas anidadas

Ahora veremos cómo agregar algunas rutas anidadas a nuestra aplicación. Consideremos que tenemos dos subpáginas asociadas con PageTwo.vue. Cuando el usuario navega a PageTwo.vue, queremos que se le pueda presentar un nuevo submenú de opciones que le permita visitar las subpáginas de PageTwo.vue. Para lograr esto, podemos usar rutas anidadas o subrutas dentro del componente PageTwo.vue. Comenzaremos modificando el archivo route.js donde podemos agregar rutas secundarias.


route.js

En el fragmento anterior, vemos que se están importando tres nuevos componentes PageTwoMenu, TwoA y TwoB. También podemos ver que la ruta por /page-twoahora tiene una nueva childrenmatriz. Esta matriz contiene subrutas, o rutas anidadas, del componente PageTwo.vue. Tenga en cuenta que cuando definimos la ruta de estas subrutas, omitimos /, y esto le dice a Vue que agregue la ruta /page-twoautomáticamente. La ruta con una cadena vacía cargará el componente PageTwoMenu.vue. Las otras dos rutas anidados definidos crearán una ruta de /page-two/a/page-two/bcargar los componentes de Dosa y TwoB respectivamente. Veamos el submenú que estamos creando en PageTwoMenu.vue.


PageTwoMenu.vue

PageTwo.vue ahora necesita una nueva instancia de <router-view> para mostrar estas rutas anidadas.


PageTwo.vue

¡Echale un vistazo!
ejemplo de rutas anidadas de vuejs


Rutas nombradas

El enrutador Vue ofrece la capacidad de crear rutas con nombre. Modifiquemos el archivo route.js para agregar rutas con nombre a un par de rutas para ver cómo funcionan.


route.js

Ahora hemos aplicado una ruta con nombre a las rutas //page-oneEsto significa que en nuestra aplicación, ahora podemos simplemente referirnos a esas rutas por su nombre. El primero es "hogar" y el siguiente es "uno". Para apuntar a esas rutas desde un método <router-link> o push () podemos actualizar nuestro código así.


Navigation.vue

Si desea pasar un objeto que contiene la ruta nombrada al toatributo, ahora debe ir precedido de dos puntos. Si estuviera usando el método push (), simplemente podría hacer algo comothis.$router.push({name: 'home'});


Parámetros de consulta

Para establecer un parámetro de consulta en la ruta, simplemente puede agregarlo al toatributo de un <router-link> Veamos eso aquí.


PageTwoMenu.vue

Ahora queremos recuperar cualquier información almacenada en ese parámetro de consulta. Podemos hacer eso con lo $route.query.xyzque vemos aquí.


PageTwo.vue

parámetros de consulta del router vue

También puede usar la sintaxis de objetos como vemos aquí.


Navigation.vue


Home.vue

ejemplo dos de parámetros de consulta del enrutador vue


Configurar un redireccionamiento

Al igual que con cualquier otra aplicación web, es posible que deba redirigir al usuario en algún momento. Si necesita redirigir a un usuario, es bastante fácil de hacer. Como ejemplo rápido, podemos configurar un redireccionamiento de enrutador vue a una página específica, además de un redireccionamiento de captura de todos, de modo que si un usuario escribe galimatías en el navegador, puede simplemente enviarlo a la página de inicio, por ejemplo.


route.js