Definición de rutas

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

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

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.

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. :)

Lucas Da Rosa

student•

Es decir, siempre las rutas irán hacia una view, que estas view tienen los componentes que nosotros definamos?

Diana Martinez

student•

Así es

Julian David Alzate Cuervo

student•

tuve problemas ejecutando el proyecto y la solucion es actualizar la version de nodejs

Jeanpierre Echevarria

student•

Para a quien le salio este error, quizá usen el plugin volar.

virtual script not found may missing script lang= ts / allowjs true / jsconfig.json solo reinicie el servidor de vue y se quito la advertencia.

Rafael Soriano Ramírez

student•

Se me hace una solución "mágica" por parte de vue hacer esto, más simple que un react router

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

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'),
    }
  ],
});

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;

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

Definición de rutas

Introducción

Introducción a Vue Router

Setup inicial

Definición de rutas

Definición de rutas

Parámetros

Rutas anidadas

API de navegación

Navegación programática

Rutas con nombre

Redirección y alias

Componentes y props

Modos de historia

Navegación avanzada

Guardas de navegación

Rutas con metadatos

Obtención de datos

Composition API

Coincidencia de rutas

Rutas dinámicas

Despedida

Despedida del curso