Vue-Router: navegación por aplicaciones Vue.js

Vue-Router es un paquete de JavaScript que le permite configurar el enrutamiento para aplicaciones de una sola página (SPA). SPA se refiere a una aplicación web que solo sirve a...

Introducción

Vue-Router es un paquete de JavaScript que le permite configurar el enrutamiento para aplicaciones de una sola página (SPA).

SPA se refiere a una aplicación web que solo sirve una única página index.html y renderiza el contenido dinámicamente, siendo así los marcos JavaScript modernos como Reaccionar.js o Vue. js es muy probable que se configuren.

¿Por qué usar Vue-Router?

El uso de un SPA tiene muchas ventajas, pero una de las principales advertencias es que todos los componentes de la página web se entregan, agregan o eliminan a través de JavaScript sin que se obtengan páginas HTML adicionales del servidor. De esto se tratan los SPA, pero el problema principal es poder navegar a través de "páginas" como los usuarios están acostumbrados a la mayoría de los sitios web.

¡Aquí es donde entra en juego Vue-Router!

Instalación y configuración

Si está utilizando CLI de Vue, es posible que ya se haya encontrado con una situación en la que se le pregunte si desea incluir Vue-Router en la configuración del proyecto.

Vue-Router se puede instalar fácilmente usando su administrador de paquetes preferido, ya sea NPM o Yarn:

1
2
3
$ npm install vue-router
OR
$ yarn add vue-router

Esto agregará vue-router a su archivo package.json y estará listo para comenzar.

Se recomienda escribir el código relacionado con el enrutador dentro de un archivo separado llamado router.js y agregarlo a la aplicación Vue dentro del archivo main.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import Vue from 'vue'
import App from './App'
import Router from './router // Router being imported

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: Router, // Router added to the Vue instance
  components: { App },
  template: '<App/>'
})

El archivo router.js: creación de rutas

En primer lugar, debemos importar router del paquete Vue-Router y agregarlo a Vue como un complemento con el método use.

Después de eso, tratamos al enrutador como un objeto, que contendrá todas las rutas. Y por supuesto, tenemos que exportarlo para que el resto de la aplicación pueda acceder a él.

1
2
3
4
5
6
7
8
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: []
})

La propiedad routes es una matriz que contendrá objetos, cada uno de los cuales serán las rutas específicas para su página web. El más básico se vería así:

1
2
3
4
5
6
7
8
 const Home = { template: '<div>Welcome to Stack Abuse!</div>' }
 routes: [
   {
     path: '/',
     name: 'Home',
     component: Home
   }
 ]

Vue-Router acepta muchas propiedades para sus objetos enrutados:

  • ruta: esta es la ruta relativa a la ruta base de su aplicación web en la que desea que se represente un determinado componente.

  • name: la propiedad de nombre será útil cuando se refiera a este objeto en particular dentro de sus componentes de Vue.

  • component: con esta propiedad, se inyectará un componente Vue en la ruta de ruta que asigne.

  • redireccionar: una ruta componente se puede redirigir a otra ruta cuando se empareja.

  • alias: bastante similar a la redirección, pero cada vez que ingrese la ruta del alias, el enrutador mostrará la ruta raíz del enrutador.

1
2
3
4
5
6
7
8
9
const router = new VueRouter({
  routes: [
    { 
      path: '/users', 
      component: Users, 
      alias: '/alias' // When entering '/alias' the content of the component Users will render
    }
  ]
})
  • child: Esta es una matriz con más rutas que se concatenarán a la ruta mientras se mantiene la ruta principal en la URL.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const router = new VueRouter({
  routes: [
    { 
      path: '/users/', 
      component: Users,
      children: [
        {
          // when /users/profile gets matched
          path: 'profile',
          component: UserProfile
        },
        {
          // when /users/info gets matched
          path: 'info',
          component: UserInfo
        }
      ]
    }
  ]
})
  • params: Son propiedades o cierta información que se le puede pasar al componente.

  • meta: siempre que una ruta (o varias rutas) coincidan con la ruta, la propiedad meta estará disponible. Esto es especialmente útil cuando se usan protectores de navegación.

También podemos agregar una propiedad modo al objeto Router. De forma predeterminada, Vue-Router está configurado en modo “hash”, lo que significa que todas las URL tendrán un “#” al final. Esto se puede eliminar, como probablemente querrás, configurando la propiedad mode en history:

1
2
3
4
export default new Router({  
  mode: 'history',
  routes: []
})

Sin embargo, este modo viene con un problema. Sin una configuración adecuada, acceder, por ejemplo, a http://localhost:8080/user/id, directamente en su navegador, generará un error 404.

Para solucionar esto, debe agregar una ruta alternativa simple a su servidor. Si la ruta no coincide con ningún activo estático, debería servir el mismo index.html.

Por ejemplo, si desea configurar el modo de historial dentro de un servidor Node.js, esto podría configurarse:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

Acceder al enrutador desde un componente {#acceder al enrutador desde un componente}

Dado un componente en particular, puede acceder al objeto del enrutador con la notación $ para reaccionar a la entrada del usuario o poder representar rutas según una determinada condición.

Para que se representen las rutas de Vue-Router, deberá pasar la etiqueta <router-view> dentro de un componente de Vue.

También puede acceder a las rutas desde una etiqueta <a>, pero esto activará una nueva representación de la página, para evitar este comportamiento, puede usar router-link con la propiedad to en lugar de href. Esta etiqueta especial le dice al enrutador que navegue a la "página" dada.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<template>
  <div>
     <h3> Vue Router - Stack Abuse </h3>
     <h4> { $router.params.id } </h4>
     <button @click="goBack"> Go Back </button>
     <router-view></router-view>
     <router-link :to="/users"> Users Route </router-link>
  </div>
</template>

export default {
  methods: {
    goBack () {
       this.$router.go(-1)
    }
  }
}

El objeto del enrutador tiene ciertos métodos adjuntos, que lo ayudarán a redirigir su aplicación a la URL deseada:

  • $router.go(): toma un número como parámetro que se refiere a la cantidad de posiciones que desea avanzar o retroceder dentro de la matriz de la pila del historial del navegador.

  • $router.push(): Esta función puede tomar una cadena, referida al nombre o ruta de la ruta a la que se quiere acceder, o un objeto con la configuración de la ruta.

1
2
3
4
5
6
router.push(
  { 
    name: 'users'
    params: { id: 1 }
  }
)
  • $router.replace(): Prácticamente lo mismo que empujar, en lugar de agregar una nueva entrada a la pila del historial del navegador, reemplaza la actual con la que estamos agregando.

Guardias de ruta

La mayoría de las aplicaciones necesitan una forma de prohibir el acceso a ciertas rutas. Esto se puede hacer fácilmente con los guardias de ruta, que discutimos anteriormente cuando hablamos de la propiedad meta.

Cada ruta tiene un flujo de resolución de navegación y hay ciertos ganchos que se pueden utilizar para su beneficio.

  • beforeEach: Sin duda, el más útil cuando se necesita una protección global para mantener a los usuarios fuera de áreas restringidas, puede configurar una función de devolución de llamada que recibirá to, from, siguiente de la función beforeEach que le permite saber desde dónde está navegando y hacia dónde, así como el siguiente paso a seguir:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.auth)) {
    if (!userIsLoggedIn)
      next('/')
      console.log('Not allowed here')
    } else {
      next('/secret-endpoint')
    }
  }
})
  • beforeEnter: se activa antes de que un usuario ingrese a una determinada ruta.

  • afterEach: Esto se llama cuando la navegación ha sido exitosa para cada ruta.

Conclusión

Vue-Router es una herramienta imprescindible si crea aplicaciones de una sola página Vue.js, le brinda la flexibilidad de administrar la navegación del usuario al máximo.

Siempre puedes obtener más información visitando la Página oficial de Vue-Router.