Contenido del curso
Definición de rutas
API de navegación
Navegación avanzada
Despedida
Definición de rutas
Ingrid Gallegos
EstudianteContenido del curso
Definición de rutas
Ingrid Gallegos
Estudiante
Uriel Solis Salinas
Estudiante
Fernando García Guerrero
Estudiante
Hans González
Estudiante
MAXIMILIANO JAYME DAHLQUIST
Estudiante
Yefreilee Danny Samuel Parra
EstudianteYefreilee Danny Samuel Parra
Estudiante
Emilio Bonmatí
Estudiante
Diana Martinez
Estudiante
Juan Victor Bascope Castro
EstudianteDiana Martinez
Estudiante
Lucas Da Rosa
EstudianteDiana Martinez
Estudiante
Julian David Alzate Cuervo
Estudiante
Jeanpierre Echevarria
Estudiante
Rafael Soriano Ramírez
EstudiantePara 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') } ] })
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:
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;
Gente para mejores prácticas es mejor escribir
component: () => import("../views/AboutView.vue"),
Muchas gracias por el aporte
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.
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>
Ahh y cree el archivo GalleryView.vue en la carpeta de views
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 :)
Si, tal vez algún problema de la versión detectando la versión corta.
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
En las clases siguientes se habla más sobre esos temas. :)
Es decir, siempre las rutas irán hacia una view, que estas view tienen los componentes que nosotros definamos?
Así es
tuve problemas ejecutando el proyecto y la solucion es actualizar la version de nodejs
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.
Se me hace una solución "mágica" por parte de vue hacer esto, más simple que un react router