Hola amigos lectores de CodigosJS – Desarrollo web en Sevilla, continuamos con una nueva lección del curso de Quasar Framework en la cual aprenderemos cómo trabajar con Vue Router en Quasar.
Antes de continuar recuerda suscribirte a nuestro blog al final de este post para que no perderte ninguna publicación de CódigoJS.
En esta entrega vamos a darle un poco de vida a la página que estamos desarrollando, crearemos las principales páginas del proyecto y enlazaremos con Vue Router.
Si aún no estás familiarizado con vue-router te recomendamos echarle un ojo a doc oficial. Nos centraremos en explicar cómo funciona Vuejs Router con Quasar para no hacer demasiado extenso el post.
Tabla de contenidos
Creando las páginas de la aplicación
Para poder explicar mejor el funcionamiento de Vue Router con Quasar será necesario crear algunas páginas de la aplicación. De momento las dejaremos sin contenido para poder explicar el funcionamiento de las rutas. Nos vamos a la consola y en la ruta del proyecto creamos las siguientes páginas haciendo uso de quasar-cli:
$ quasar new p Index
También las podemos crear todas en una sola línea, separadas por espacio:
$ quasar new p Usuarios Acerca Login Register
Por cada página que se crea se genera un mensaje en la consola como el siguiente:
app:new Generated page: src/pages/Usuarios.vue +7ms app:new Make sure to reference it in src/router/routes.js +0ms
Si miramos en la carpeta src/pages veremos todas las páginas recién creadas. Vamos a añadir un pequeño mensaje a cada página. Editamos la página Index y dentro del componente <q-page> añadimos una etiqueta h1 como se muestra a continuación:
<q-page class="flex flex-center"> <h1>Gestión de tareas</h1> </q-page>
y de esta forma editamos todas las páginas y añadimos un mensaje dentro del componente <q-page> </q-page> Usuarios.vue – Gestión de usuarios Login.vue – Iniciar sesión Register.vue – Registro de usuarios Acerca.vue – Acerca de nosotros
Estableciendo rutas con vuejs router en Quasar
Ahora que tenemos todas las páginas creadas, vamos a conectarlas con los enlaces del menú a través de Vuejs Router. Las rutas en un proyecto Quasar las podemos encontrar en src/router donde tenemos dos archivos: /src/router/index.js – Contiene el código de inicialización de Vue Router /src/router/routes.js – Contiene las rutas del sitio o aplicación. Editamos el archivo router.js y lo dejamos como sigue a continuación, después lo explicaremos paso a paso.
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '',
name: 'index',
component: () => import('pages/Index.vue')
},
{
path: '/usuarios/',
name: 'usuarios',
component: () => import('pages/Usuarios.vue')
},
{
path: '/acerca/',
name: 'acerca',
component: () => import('pages/Acerca.vue')
}
]
}
]
export default routes
Ahora nos vamos a la consola del sistema y ejecutamos el proyecto:
$quasar dev
Esperamos a que se compile y se abra de forma automática en el navegador. Ahora podemos navegar por el menú lateral izquierdo a las páginas de nuestra aplicación. ¿Fácil verdad?.
Vue Router con Layouts y Pages en Quasar
Antes de continuar hay que aclarar que el uso de los Layouts de Quasar no es obligatorio. Puedes usar Quasar y Vue Router de forma tradicional, incluso crear la estructura de carpetas que desees para organizar tus páginas. Nos vamos al editor de código y abrimos la página MyLayout.vue
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="left = !left" />
<q-toolbar-title>
...
...Q-layout es un componente usado para encapsular páginas, actuando como una plantilla base que comparte la cabecera, el menú etc. con el resto de las páginas de la aplicación.
Inyectando páginas en el layout
El layout de nuestra aplicación tiene además el componente <router-view></router-view> en el cual inyectaremos el contenido de las páginas de nuestra aplicación. Este componente forma parte de Vue Router y permite renderizar dentro de un componente otros componentes que coincidan con la ruta.
<!-- /src/layouts/MyLayout.vue -->
<template>
<q-layout>
...
<!-- Aquí es donde las páginas serán inyectadas -->
<q-page-container>
<router-view></router-view>
</q-page-container>
...
</q-layout>
</template>Cada página que creemos en un proyecto con quasar-cli debe estar asociada a un layout, por ejemplo:
src/
├── layouts
│ └── MyLayout.vue # Nuestro Layout
└── pages
├── Index.vue # Página para la ruta /
├── Usuarios.vue # Página para la ruta /usuarios/
└── Acerca.vue # Página para ruta /acerca/
Ahora, vamos a analizar el archivo de rutas src/router/routers.js:
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '',
name: 'index',
component: () => import('pages/Index.vue')
},
{
path: '/usuarios/',
name: 'usuarios',
component: () => import('pages/Usuarios.vue')
},
{
path: '/acerca/',
name: 'acerca',
component: () => import('pages/Acerca.vue')
}
]
}
]La primera ruta corresponde al componente layouts/MyLayout.vue que encapsulará a las páginas Index.vue, Usuarios.vue y Acerca.vue. De esta forma todas las páginas que se vayan añadiendo a la aplicación serán hijas de la página Layout.vue.
Añadiendo un nuevo layout
Ahora bien, necesitamos añadir la página de login y de registro de usuarios a la aplicación, pero queremos usar un layout diferente para no mostrar el menú y algunas opciones del layout principal MyLayout.vue. Nos vamos a la consola y creamos un nuevo layout con quasar-cli:
$ quasar new l Users
Si nos fijamos en la carpeta src/layouts veremos el nuevo layout creado. Para continuar necesitamos diseñar el Layout recién creado y adaptarlo a nuestras necesidades, nos vamos al Layout Builder de Quasar ,como vimos en la lección Diseñando el Layout de Quasar, y creamos uno con el componente QHeader activo. Copiamos el código, editamos el layout src/layouts/Users.vue y reemplazamos el código por el del Layout Builder.
Enlazando las páginas con el nuevo Layout
Continuamos con nuestra aplicación, ahora vamos a vincular las páginas de Login.vue y Register.vue con el nuevo layout. Editamos el archivo de rutas routes.js y añadimos un nuevo objeto con las rutas dentro del array routes, quedando de la siguiente forma.
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '',
name: 'index',
component: () => import('pages/Index.vue')
},
{
path: '/usuarios/',
name: 'usuarios',
component: () => import('pages/Usuarios.vue')
},
{
path: '/acerca/',
name: 'acerca',
component: () => import('pages/Acerca.vue')
}
]
},
{ // Nuevas rutas
path: '/',
component: () => import('layouts/Users.vue'),
children: [
{ path: '/login/',
name: 'login',
component: () => import('pages/Login.vue')
},
{
path: '/register/',
name: 'register',
component: () => import('pages/Register.vue')
}
]
}
]
export default routes
¿Qué estamos haciendo aquí? pues diciendo al Vue Router que la ruta /login/ y /register/ estarán acopladas al layout Users.vue, el cual actuará como padre de todas las rutas que se declaren como hijas (chindren). Para ver el resultado guardamos los cambios y nos vamos al navegador. Como no tenemos un enlace creado pedimos la url directamente de la barra de navegación http://localhost:8080/#/login o http://localhost:8080/#/register para ver las respectivas páginas. ¿Fácil verdad? Podemos ver cómo se muestran las páginas con el layout Users.vue.
Activando el history mode en Quasar
Las SPA suelen tener por defecto un símbolo de # en el sistema de rutas, de esta forma el navegador reconoce que no tiene que hacer una petición al servidor e intenta resolver la página internamente. En el ejemplo anterior vimos que para acceder a la página de login la url era:
http://localhost:8080/#/login
Podemos usar este sistema de rutas sin problemas, pero también tenemos la opción de cambiarlo para eliminar el símbolo de # de la ruta y hacerla más limpia y amigable a los usuarios.
http://localhost:8000/login
En Quasar el history mode de HTML se activa en el archivo quasar.conf.js, localizamos la sección:
build: {
scopeHoisting: true,
vueRouterMode: 'history',
// showProgress: false,
// gzip: true,
// analyze: true,
// preloadChunks: false,
// extractCSS: false,y eliminamos el comentario (//) de la opción vueRouterMode: 'history', quedando como el ejemplo anterior. Guardamos los cambios, nos vamos al navegador y pedimos la página principal, si navegamos por el menú del sitio veremos que ya el símbolo de número (#) no está en la url. Activar el modo history es imprescindible también en proyecto que requieren SEO para que los bots puedan rastrear y acceder en todo momento las rutas del sitio web. Más adelante veremos algunos casos donde también es importante activar el history mode de HTML5 Por último, puedes clonar este proyecto desde GitHub el cual vamos actualizando con cada entrega que publicamos. Bueno amigo lector, hasta aquí esta lección de hoy, un poco extensa pero un tema super importante en el desarrollo de aplicaciones web y apps con Quasar y Vue-Router. Me encantaría que nos dejaras tus comentarios... Hasta la próxima...
