No tienes acceso a esta clase

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

Definici贸n de rutas

3/17
Recursos

Aportes 6

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

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;

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 鈥渕谩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>