Lección 2.5. Vue Router con Quasar

Vie 13 Dic 2019

Hola amigos lectores de CodigosJSDesarrollo web en Sevilla, continuamos con una nueva lección del curso de Quasar Framework en la cual aprenderemos como trabajar con Vue Router en Quasar.

Antes de continuar recuerda suscribirte a nuestro blog al final de este post para que no te pierda ninguna publicación de CodigoJS.

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 como 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?.

vuejs-router

Vue Router con Layouts y Pages en Quasar

Antes de continuar es válido aclarar que el uso de los Layouts de Quasar no es obligatorio. Usted es libre de usar Quasar y Vue Router de forma tradicional, incluso crear la estructura de carpetas que usted desee para organizar sus 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.

Layout user en Quasar

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

¿Que 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 como se muestran las página 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. Buenos 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...



Déjanos un comentario

Artículos relacionados

 

Este sitio web utiliza cookies con la finalidad de ofrecer una mejor experiencia a nuestros usuarios. Al continuar navegando acepta nuestra Política de Cookie.
Estoy de acuerdo