Rutas en Aurelia Javascript Framework

Aurelia, framework javascript

Trabajar con rutas en Aurelia es muy sencillo, la verdad que todo el trabajo con este framework javascript lo es. En este tutorial vamos a ver cómo podemos configurar el sistema de rutas en Aurelia para poder tener navegación en nuestra aplicación.

Aurelia pone a nuestra disposición en cada vista de modelo el método configureRouter, el cuál tiene los parámetros config, para realizar la configuración del sistema de rutas en Aurelia, router, una instancia del router que será utilizada en las vistas para acceder a la navegación.

Enlaces que te pueden interesar:

Lo primero que vamos a hacer es crear la siguiente estructura en nuestro directorio src, así lo tendremos todo mejor organizado.

aurelia-router

Configuración de rutas en Aurelia

Ahora vamos a definir el sistema de rutas de nuestra aplicación utilizando el método configureRouter, así que abre el archivo src/app.js y modifica el código por el siguiente.


Las siguientes son las propiedades de la configuración de cada ruta:

  • route: es la url sobre la que deberá ejecutarse, el componente home funcionará tanto en la ruta por defecto como en #/home.
  • name: nos servirá para saber a que componente estamos haciendo referencia, por ejemplo, cuando queramos navegar.
  • moduleId: es simplemente la ruta del archivo .js, finalmente.
  • nav: si queremos que esté presente en router.navigation, por defecto false.
  • title: será el título de la sección que se esté mostrando.

Finalmente, con this.router pasamos la instancia de router a la vista para poder definir todas las rutas de la aplicación de forma que las podamos pintar.

Abre el archivo nav-bar.html y añade el siguiente código, el cuál pinta una navegación utilizando bootstrap y recorre las rutas para que podamos navegar, pero sólo aquellas en las que hemos definido nav a true.


Este trozo de código por si sólo no hace nada, debemos utilizarlo en el archivo src/app.html, así que ábrelo y modifica el código por el siguiente.


Gracias a router-view el contenido de cada componente será pintado en esa zona, y no tenemos que preocuparnos por nada más que de crear nuestros componentes.

Ahora sólo nos queda definir el resto de componentes, nosotros vamos a definir el componentes de users y user-detail, el resto sólo deberás crear cada archivo.

Abre el archivo src/components/users/users.js y añade el siguiente código.


Y ahora lo mismo pero con el archivo html.


Lo único que no debemos conocer llegados a este punto es el atributo route-href, esta es la forma con la que podemos navegar a otra ruta con parámetros, nombre de la ruta y parámetros que necesitamos pasar en forma de objeto.

Ahora sólo nos resta definir el componente user-detail, así que abre el archivo .js y añade el siguiente código, el cuál contiene una agradable sorpresa.


Siempre que el sistema de enrutado procesa una navegación, este ejecuta un estricto ciclo de vida de los modelos desde y hacia los que está navegando, y activate es uno de los ciclos que se procesan, es decir, es un gancho que nos sirve en este caso para obtener los parámetros que tenemos disponibles en cada ruta, así de sencillo.

Ahora sólo debes abrir el archivo .html y añadir lo siguiente, con lo cuál ya estaremos pintando el id del usuario que hemos solicitado.


Y eso es todo, así de sencillo es establecer un completo sistema de rutas, aunque podemos hacer mucho más, por ejemplo, imagina que deseas pasar información extra a una ruta, nosotros vamos a pasar una variable llamada additionalData al detalle de usuarios, así que abre el archivo app.js y modifica la configuración para el detalle de un usuario por lo siguiente.


Ahora abre el archivo user-detail.js y modifica el contenido por el siguiente.


Y ahora sí, eso es todo, ya tenemos también disponible en el archivo user-detail.html la variable additionalData con el contenido que hemos establecido en la configuración de las rutas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR