Cómo manejar el enrutamiento en Vue con Vue Router

Vue Router, el enrutador oficial de Vue, permite crear aplicaciones de una sola página (SPA) en Vue. Vue Router le permite asignar los componentes de su aplicación web a diferentes rutas del navegador, administrar la pila de historial de su aplicación y configurar opciones de enrutamiento avanzadas.

Primeros pasos con el enrutador Vue

Para comenzar con Vue Router, ejecute lo siguiente npm (Administrador de paquetes de nodos) comando en su directorio preferido para crear su aplicación Vue:

npm create vue 

Cuando se le pregunte si desea agregar Vue Router para Solicitud de una sola página desarrollo, seleccionar Sí.

A continuación, abra su proyecto en su editor de texto preferido. tu aplicación origen El directorio debe incluir un enrutador carpeta.

El enrutador carpeta alberga un índice.js archivo que contiene el código JavaScript para manejar rutas en su aplicación. El índice.js El archivo importa dos funciones del enrutador vue paquete: crear enrutador y crearWebHistory.

El crear enrutador La función crea una nueva configuración de ruta a partir de un objeto. Este objeto contiene el historia y rutas claves y sus valores. El rutas key es una matriz de objetos que detallan la configuración de cada ruta, como se ve en la imagen de arriba.

Después de configurar sus rutas, necesita exportar esto enrutador instancia e importar esta instancia en el principal.js archivo:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Importaste el enrutador función en el principal.js y luego hizo que su aplicación Vue usara esta función de enrutador con el usar método.

Luego puede aplicar sus rutas a su aplicación Vue estructurando un bloque de código similar al siguiente: