Configurando vue-router en Vue 3 + Vite

Adrian Galicia • March 31, 2021

javascript vue

Introducción

En este artículo les mostraré cómo podemos incluir vue-router, que es el paquete oficial de Vue que nos permite el uso de rutas en nuestras aplicaciones.

Prerequisitos

Para escribir el ejemplo de este artículo estamos utilizando

Vamos a necesitar un proyecto Vue, en caso de que aún no tengamos uno creado lo podemos generar con el comando

npm init @vitejs/app {nombre-del-proyecto} -- --template vue

Vamos instalar las dependencias para nuestro proyecto y comprobar nuestra instalación de la siguiente manera

cd {nombre-del-proyecto}
npm install

Lo siguiente será instalar vue-router

npm install vue-router@4

Generando nuestro router

Para iniciar con la configuración de nuestro router vamos a crear dos componentes, el primero será el componente ./src/compoents/Home.vue

<template>
  <h1>Home</h1>
</template>

<script>
export default {
  name: "Home",
};
</script>

El siguiente componente que vamos a crear es ./src/components/About

<template>
  <h1>Acerca de</h1>
</template>

<script>
export default {
  name: "About",
};
</script>

Ya que tenemos nuestros componentes vamos a crear nuestro archivo router.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "./components/Home.vue";
import About from "./components/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

const history = createWebHistory();

const router = createRouter({
  history,
  routes,
});

export default router;

Agregando el router a nuestro componente principal

Ahora vamos a modificar el archivo main.js , importando el router creado anteriormente

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App)
  .use(router)
  .mount("#app");

Para finalizar con la configuración de nuestro router vamos a modificar el archivo App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link>&nbsp;
    <router-link to="/about">Acerca de</router-link>
  </nav>
  <router-view />
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Ahora solo resta ejecutar npm run dev , ahora solo resta visitar las siguientes url para validar nuestra instalación