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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *