Definición de rutas

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 “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>