Vue Router es la biblioteca oficial de enrutamiento para Vue.js, que permite la navegación entre diferentes vistas o componentes en una aplicación de una sola página (SPA).
Primero, necesitamos instalar Vue Router en nuestro proyecto Vue.js. Puedes hacerlo ejecutando el siguiente comando:
npm install vue-router@next
A continuación, configuramos Vue Router en nuestro proyecto:
// 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 router = createRouter({
history: createWebHistory(),
routes
});
export default router;
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Importamos el router
const app = createApp(App);
app.use(router); // Usamos Vue Router en nuestra aplicación
app.mount('#app');
Home
Bienvenido a la página principal.
About
Esta es la página About.
En el archivo router.js
, importamos createRouter
y createWebHistory
de vue-router
. Definimos las rutas de nuestra aplicación en un array routes
, donde cada ruta está asociada a un componente. Luego, creamos una instancia de router utilizando createRouter
, especificando el historial de navegación y las rutas definidas.
En el archivo main.js
, importamos el router y lo integramos con nuestra aplicación Vue usando app.use(router)
. Luego montamos la aplicación en el elemento con el id app
.
router-link
y router-view
En el archivo App.vue
, usamos router-link
para crear enlaces de navegación y router-view
para renderizar las vistas asociadas a las rutas.
router-link
: Se utiliza para crear enlaces de navegación. La prop to
especifica la ruta a la que el enlace debe navegar.router-view
: Es un componente que actúa como un contenedor para las vistas. Renderiza el componente correspondiente a la ruta actual.Creamos dos componentes de vista simples, Home.vue
y About.vue
, que contienen el contenido que queremos mostrar cuando se navega a sus respectivas rutas.
npm install vue-router@next
.createRouter
.main.js
.router-link
y router-view
: router-link
crea enlaces de navegación y router-view
renderiza las vistas correspondientes a las rutas.Home.vue
y About.vue
.