Header Ads Widget

Ticker

6/recent/ticker-posts

Enrutador Vue 3

 El enrutador es un componente importante para crear SPA o aplicaciones de una sola página, por lo que, al igual que cualquier biblioteca frontal, Vue tiene su propio enrutador.

Con Vue 3, tenemos un nuevo Vue Router que usa Vue 3, con muchas características similares a Vue 3, pero hay algunas diferencias con Vue 2.

En este tutorial, le presentaremos Vue Router para Vue 3, con código de ejemplo.

El enrutador Vue le permite crear aplicaciones de una sola página con múltiples vistas utilizando la última biblioteca Vue 3.

Paso 1: instalar la CLI de Vue 3 y crear una nueva aplicación

Comencemos instalando la CLI de Vue 3. Regrese a su terminal y ejecute el siguiente comando:

$ npm install -g @vue/cli

A continuación, podemos crear un nuevo proyecto de Vue 3 usando el siguiente comando:

$ vue create vue3-router-app

Se le pedirá que elija un ajuste preestablecido, elija el ajuste preestablecido de Vue 3.

A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor de desarrollo de la siguiente manera:

$ cd vue3-router-app
$ npm run serve

A continuación, vaya a http: // localhost: 8080 con su navegador para ver su aplicación Vue 3 ejecutándose.

Paso 2: instalación del enrutador Vue 3

Ahora que tenemos un nuevo proyecto de Vue 3, instalemos el enrutador Vue 3 usando los siguientes comandos:

$ cd vue3-router-app
$ npm install vue-router

A continuación, cree una routercarpeta y un index.jsarchivo dentro de la routercarpeta y agregue el siguiente código dentro del router/index.jsarchivo:

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

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

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

export default router;

Primero importamos los métodos createWebHistorycreateRouterdel vue-routerpaquete y nuestro Vue 3 HomeAboutcomponentes.

A continuación, definimos una routesmatriz, donde podemos agregar rutas para cada componente.

Una ruta tiene las siguientes propiedades:

  • Ruta: la ruta URL de la ruta.
  • Nombre: un nombre opcional para la ruta.
  • Componente: El componente que cargará el enrutador cuando se visite la ruta.

A continuación, creamos y exportamos el objeto enrutador, utilizando el createRoutermétodo pasando la routesmatriz y un objeto devuelto por el createWebHistorymétodo.

Paso 3: Importación de nuestro enrutador Vue 3

A continuación, necesitamos importar nuestro enrutador en el main.jsarchivo.

Abra el /src/main.jsarchivo y actualícelo de la siguiente manera:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' 

createApp(App).use(router).mount('#app')

Importamos el enrutador y luego usamos el enrutador al crear nuestra aplicación Vue 3.

Paso 4: agregar la vista y la navegación del enrutador

Vue Router proporciona dos directivas para agregar una vista de router y enlaces de navegación:

  • <router-view /> - Esto marca el lugar donde el enrutador insertará el componente cuando se active una ruta.
  • <router-link>: se utiliza para crear enlaces de navegación en lugar de <a href>.

Abra el src/views/App.vuearchivo y actualícelo de la siguiente manera:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home">Home</router-link>  
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

Hemos visto cómo funciona el enrutador Vue 3 con un ejemplo, pero no es necesario seguir todos estos pasos gracias a Vue CLI que le permite instalar y agregar automáticamente el enrutador Vue.

Cuando cree un proyecto de Vue, simplemente "Seleccione características manualmente" cuando se le solicite que seleccione un ajuste preestablecido y luego asegúrese de marcar "Enrutador" cuando se le solicite que seleccione las características necesarias para su proyecto. Esto le indicará a la CLI que instale Vue Router dentro de su aplicación Vue 3 y agregue el código que hemos visto antes para crear y configurar una instancia de enrutador. Simplemente necesita agregar sus rutas dentro de la routesmatriz.

Publicar un comentario

0 Comentarios