Si queremos agregar estilos a las anclas de acceso a otra ruta:
.
Referenciia: How to VueJS router-link active style
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 6
Preguntas 3
Si queremos agregar estilos a las anclas de acceso a otra ruta:
.
Referenciia: How to VueJS router-link active style
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"),
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
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>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.