El enrutamiento es una de las muchas funciones proporcionadas por Vue.js para permitir a los usuarios cambiar de página sin actualizar cada vez que se carga una página. Esto da como resultado transiciones suaves entre las páginas que le dan una mejor sensación al usuario.
Configuración de la aplicación: en primer lugar, debemos crear un proyecto para trabajar. Podemos usar Vue CLI (Command Line Interface) para esto. Con la terminal abierta, ejecute el siguiente comando a continuación.
vue init webpack vue-routing-example
Durante el proceso de inicialización, asegúrese de decir que sí cuando se le solicite instalar vue-router . Es necesario para poder trabajar con enrutamiento en nuestra aplicación. Una vez finalizada la inicialización, abra la aplicación para verificar si el proceso fue exitoso ejecutando el siguiente comando en la terminal:
cd vue-routing-example
npm run dev
Con esos comandos, su aplicación se compilaría e implementaría en el servidor de desarrollo local.
href=”http://localhost:8080″
Construyendo nuestra aplicación: para implementar el enrutamiento en nuestra aplicación, primero debemos crear páginas a las que enrutar. Podemos cambiar y usar el archivo HelloWorld.vue como nuestra primera página y crear un nuevo archivo en esa carpeta de componentes HelloGeek.vue como nuestra segunda página. Estas páginas no tendrán nada funcional y serán para entender el flujo de enrutamiento.
- Paso 1: Reemplace el contenido de HelloWorld.vue con el siguiente código. La sección de plantilla es donde estructuramos el contenido visible del componente. Aquí, muestra un parámetro (msg) como un encabezado que se le pasa desde la sección de script del código. La sección del script se usa para contener la lógica de nuestro código, que en este caso es devolver un valor.
HolaMundo.vue:
javascript
<template>
<div class = 'helloworld'>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
- Paso 2: pegue el siguiente código en el archivo HelloGeek.vue . Igual que HelloWorld.vue para la plantilla y la sección de script .
HelloGeek.vue: - Paso 3: ahora que tenemos nuestras páginas listas, necesitamos configurar nuestro archivo index.js para establecer la configuración de enrutamiento.
- En la sección de importación hemos importado tanto Vue como Router para ayudar a construir nuestro proyecto. También hemos importado las dos páginas a las que queremos enrutar: HelloWorld y HelloGeek .
- Vue.use(strong) se utiliza para asegurarse de que el enrutador se agregue como ayudante en nuestro proyecto.
- La configuración de la ruta es un objeto JavaScript que contiene la ruta , el nombre y el componente . Necesitamos agregar este objeto a la array de rutas. Podemos asignar tanto la ruta (URL) como el nombre a nuestro componente.
- Aquí, como caso especial, la ruta raíz se redirige a la página HelloWorld ya que la raíz nunca debe estar vacía.
- Paso 4 (opcional): el usuario ahora puede enrutar manualmente a cada página cambiando la URL a http://localhost:8080/#/helloworld o http://localhost:8080/#/hellogeek . Pero configuremos formas de enrutar a través de enlaces.
- Paso 5: Aquí haremos la vinculación de rutas, podemos configurar enlaces a rutas usando la etiqueta <route-link>. El atributo to debe recibir una ruta a la página que necesitamos enrutar.
<router-link to="/helloworld">Hello World</router-link>
- La sección de plantilla contiene una imagen seguida de enlaces de ruta a nuestras páginas usando la etiqueta <router-link> .
- La etiqueta de marcador de posición <router-view> se utiliza para definir el lugar donde se insertaría el componente de ruta en la salida HTML.
- La sección de estilo del código, bueno, ayuda a diseñar la página.
Producción:
