Navegación programática
Contenido del curso
Definición de rutas
API de navegación
Navegación avanzada
Despedida
Navegación programática
Contenido del curso
Navegación programática
Ameth Ordoñez Erazo
Estudiante
Uriel Solis Salinas
Estudiante
Ivan Sebastian Mendoza Baca
Estudiante
Rafael Soriano Ramírez
Estudiante
Carlos Rodríguez
Estudiante
Ruben Eduardo Acosta
EstudianteEn composition API se puede hacer de la siguiente forma, incluyendo pasandole el parámetro en el input de inicio de sesión:
<script setup> import { ref } from "vue"; import { useRoute, useRouter } from "vue-router"; const router = useRouter(); const username = ref(""); const login = () => { router.push({ path: "/chats", name: "chat", // query: { // search: "arjona", // }, params: { idChat: username.value, }, }); }; </script> <template> <main> <h4>Ingresa tu usuario</h4> <input type="text" placeholder="Usuario" v-model="username" /> <button @click="login">Iniciar sesión</button> </main> </template>
Explicación de composition API: Template
<main> <h4>Introduce tu nombre de usuario {{ username }}</h4> <input type="text" v-model="username" placeholder="username" /> <button @click="iniciar">Iniciar sesión</button> </main>
Script
import { ref } from 'vue'; import { useRouter } from "vue-router"; const username = ref(''); const router = useRouter(); const iniciar = () => { router.push({ path: "/chats", query: { variable1: 1, }, replace: true, }); };
ref es una función que nos permite crear una variable reactiva.
.
useRouter es una función que nos permite acceder a las propiedades de la ruta actual.
.
router.push es una función que nos permite agregar una nueva ruta al historial de navegación, y se le pueden agregar varios parámetros:
path es la ruta a la que queremos navegar.query es un objeto que contiene las variables que queremos pasar a la ruta.replace es un booleano que nos permite reemplazar la ruta actual por la nueva ruta..
Otras propiedades a las que se puede acceder gracias a router:
router.replace es una función que nos permite reemplazar la ruta actual por una nueva ruta.router.go es una función que nos permite navegar hacía atrás o adelante en el historial de navegación.Estaría bien utilizar estos métodos para cuando estamos en cierto menú con un URL diferente al base, solo tendríamos que retroceder 1 y estaríamos de nuevo en la ruta deseada :)
Para una inicio de sesión con precarga de datos está genial
Código con cmposition API de HomeView
<template> <main> <h2>Esto es una página de Home</h2> <h4>Introduce tu nombre de usuario:</h4> <input v-model="username" type="text" placeholder="username" /> <button @click="init">Iniciar sesión</button> </main> </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; const username = ref(''); const router = useRouter(); const init = () => { // Validación del backend if (username.value === 'pepito123') { router.push({ path: '/chats', query: { var1: 1, var2: 2 }, }); } }; </script>
. Referencias: Programmatic Navigation Vue Router and the Composition API
No se porque todo lo explica con option API :(