Navegación programática

Clase 6 de 17 • Curso de Vue.js: Navegación con Vue Router

Ameth Ordoñez Erazo

student•

En 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>

Ivan Sebastian Mendoza Baca

student•

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 :)

Rafael Soriano Ramírez

student•

Para una inicio de sesión con precarga de datos está genial

Uriel Solis Salinas

student•

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.

Carlos Rodríguez

student•

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

Navegación programática

Introducción

Introducción a Vue Router

Setup inicial

Definición de rutas

Definición de rutas

Parámetros

Rutas anidadas

API de navegación

Navegación programática

Rutas con nombre

Redirección y alias

Componentes y props

Modos de historia

Navegación avanzada

Guardas de navegación

Rutas con metadatos

Obtención de datos

Composition API

Coincidencia de rutas

Rutas dinámicas

Despedida

Despedida del curso