Definición de rutas

Clase 3 de 17 • Curso de Vue.js: Navegación con Vue Router

Uriel Solis Salinas

student•

Vue-router es un paquete que nos permite crear rutas en nuestra aplicación. . Se crea un archivo index.js en la carpeta router, en donde primero se tienen que importar: .

import { createRouter, createWebHistory } from 'vue-router';

createRouter permite crear el sistema de rutas y lo devolverá en una variable.

createWebHistory permite crear el historial de navegación de la aplicación. . Creando la variable router, que este será un JSON que contendrá las rutas de nuestra aplicación, y necesita dos cosas:

El modo historial de navegación que queremos utilizar.
Las rutas que queremos utilizar, y es una lista de JSON y cada uno es una ruta, cada ruta necesita mínimo dos cosas para funcionar:
1. La ruta en sí, la URL que se mostrará en el navegador.
2. El componente que se mostrará en esa ruta. .

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/', // Home page
    component: HomeView, // HomeView es el componente que se mostrará en la ruta '/'
    },
    {
      path: '/about',
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/chats',
      component: () => import('../views/ChatsView.vue'),
    }
  ],
});

. Por ultimo, se exportará

export default router;

Fernando García Guerrero

student•

Gente para mejores prácticas es mejor escribir

component: () => import("../views/AboutView.vue"),

Hans González

student•

Muchas gracias por el aporte

MAXIMILIANO JAYME DAHLQUIST

student•

En realidad es la forma correcta para que la carga sea asíncrona y el componente se cargue al ir a la ruta correspondiente. Es útil en aplicaciones grandes, de otra manera no cambia demasiado el rendimiento.

Ingrid Gallegos

student•

Para rutas no encontradas o Error 404:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //mis otras rutas
    {
      path: '/:pathMatch(.*)*',
      name: 'error404',
      component: () => import('../views/Error404View.vue')
    }
  ]
})

Yefreilee Danny Samuel Parra

student•

Agregue una nueva pagina de galeria utilizando lo aprendido en la clase,

index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/about', component: import("../views/AboutView.vue") },
    { path: '/chats', component: import("../views/ChatsView.vue") },
    { path: '/gallery', component: import("../views/GalleryView.vue") },
  ],
});

export default router;

App,vue

<script setup></script>

<template>
  <header>
  <div class="content">
    <div class="toHome">
    <router-link to='/'>Home</router-link>
    </div>
    <div class="toChats">
    <router-link to='/chats'>Chats</router-link>
    </div>
    <div class="toAbout">
    <router-link to='/about'>About</router-link>
    </div>
    <div class="toGallery">
    <router-link to='/gallery'>Gallery</router-link>
    </div>
  </div>
  <router-view/>
  </header>
</template>

<style scoped>
.content {
  display: flex;
  font-size: 20px;
}
.toHome {
  margin: 5px;
}
.toChats {
  margin: 5px;
}
.toAbout {
  margin: 5px;
}
.toGallery {
  margin: 5px;
}
</style>

Yefreilee Danny Samuel Parra

student•

Ahh y cree el archivo GalleryView.vue en la carpeta de views

Emilio Bonmatí

student•

Hola!

la aplicación me daba un error en el App.vue por la etiqueta <router-view />, no se si es por una actualización, pero al menos, en mi caso tarde un buen rato hasta que me funcionó poniendo <router-view></router-view>.

Me gustaría saber si hice algo mal o es simplemente que lo cambiaron, gracias :)

Diana Martinez

student•

Si, tal vez algún problema de la versión detectando la versión corta.

Juan Victor Bascope Castro

student•

Se puede crear 2 RouterView? Quiero hacer Una pagina que maneje un SideBar y otra con un NavBar y asi otras pagina diferente, con rutas dinamicas y sub-rutas dinamicas

Diana Martinez

student•

En las clases siguientes se habla más sobre esos temas. :)