Definición de rutas

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"),

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>

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