Navegación programática

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>
    <h3>Ingresa tu usuario</h3>
    <input type="text" placeholder="Usuario" v-model="username" />
    <button @click="login">Iniciar sesión</button>
  </main>
</template>

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 😃

Explicación de composition API:
Template

<main>
    <h3>Introduce tu nombre de usuario {{ username }}</h3>
    <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.

Código con cmposition API de HomeView

<template>
    <main>
        <h1>Esto es una página de Home</h1>
        <h3>Introduce tu nombre de usuario:</h3>
        <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

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