Vue-Router: Navegación por aplicaciones de Vue.js

Introducción

Enrutador Vue es un paquete de JavaScript que le permite configurar el enrutamiento para aplicaciones de página única (SPA).

SPA se refiere a una aplicación web que solo sirve a una index.html página y renderiza contenido dinámicamente, siendo esta la forma en que los marcos de JavaScript modernos como React.js o Vue.js probablemente estén configurados.

¿Por qué utilizar 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 con la mayoría de los sitios web.

Aquí es donde Enrutador Vue ¡patadas en!

Instalación y configuración

Si está utilizando Vue CLI, 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 Hilo:

$ npm install vue-router
OR
$ yarn add vue-router

Esto agregará vue-router para usted package.json archivo y listo.

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

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

Primero tenemos que importar router del paquete Vue-Router y agréguelo a Vue como un plugin 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.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

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

 const Home = { template: '<div>Welcome to Stack Abuse!</div>' }
 routes: [
   {
     path: "https://Pharos.sh.com/",
     name: 'Home',
     component: Home
   }
 ]

Vue-Router acepta numerosas propiedades por sus objetos enrutados:

• path: Esta es la ruta relativa a la ruta base de su aplicación web donde desea que se procese 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 que asigne.
• redirect: Una ruta de componente se puede redirigir a otra ruta cuando coincide.
• alias: Bastante similar a la redirección, pero siempre que ingrese la ruta del alias, el enrutador mostrará la ruta raíz del enrutador.

const router = new VueRouter({
  routes: [
    { 
      path: '/users', 
      component: Users, 
      alias: '/alias' // When entering '/alias' the content of the component Users will render
    }
  ]
})

• children: Esta es una matriz con más rutas que se concatenarán a la ruta mientras se mantiene la ruta principal en la URL.

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: Estas son propiedades o cierta información que podría pasarse 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 utilizan guardias de navegación.

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

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

Sin embargo, este modo tiene un problema. Sin una configuración adecuada, accediendo, por ejemplo, http://localhost:8080/user/id, directamente en su navegador resultará en un error 404.

Para solucionar este problema, 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:

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)
})

Acceso al enrutador desde un componente

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

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

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

<template>
  <div>
     <h2> Vue Router - Stack Abuse </h2>
     <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 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, refiriéndose al nombre o ruta de la ruta a la que desea acceder, o un objeto con la configuración de la ruta.

router.push(
  { 
    name: 'users'
    params: { id: 1 }
  }
)

• $router.replace(): Más o menos lo mismo que push, 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 determinadas rutas. Esto se puede hacer fácilmente con los guardias de ruta, que discutimos anteriormente cuando hablamos de la meta propiedad.

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

• beforeEach: Sin duda, el más útil cuando se necesita un guardia global para mantener a los usuarios fuera de las áreas restringidas, puede configurar una función de devolución de llamada que recibirá to, from, next desde el beforeEach función que le permite saber desde dónde y hacia dónde está navegando, así como el siguiente paso a seguir:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.auth)) {
    if (!userIsLoggedIn)
      next("https://Pharos.sh.com/")
      console.log('Not allowed here')
    } else {
      next('/secret-endpoint')
    }
  }
})

• beforeEnter: Se activa antes de que un usuario ingrese a una determinada ruta.
• afterEach: Se llama siempre que la navegación ha tenido éxito en cada ruta.

Conclusión

Enrutador Vue es una herramienta imprescindible si crea cualquier aplicación de página única Vue.js, le brinda la flexibilidad para administrar la navegación del usuario al máximo.

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