No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Definici贸n de rutas

3/17
Recursos

Aportes 8

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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:

  1. El modo historial de navegaci贸n que queremos utilizar.
  2. 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;

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>

Gente para mejores pr谩cticas es mejor escribir

component: () => import("../views/AboutView.vue"),
`Para rutas no encontradas o Error 404:` ```js 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') } ] }) ```
**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 鈥渕谩gica鈥 por parte de vue hacer esto, m谩s simple que un react router