Parámetros

Alt + 96 =  `

Le comparto un tip:
Usen la etiqueta <pre> de html para dar un formato mas legible en el html de la variable que quieran revisar. Es genial para ver un json u objecto javascript.

    <article>
       <pre> {{this.$router }}</pre>
    </article>

Ejemplo realizado con Composition API:

<template>
  <div>
    <aside>
      <div v-for="chat in chats" :key="chat.id">
        <RouterLink :to="`/chats/${chat.id}`">{{ chat.name }}</RouterLink>
      </div>
    </aside>
    <article>
      <h2>
        {{ this.$route.params.idChat }}
      </h2>
    </article>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const chats = reactive([
  { id: 1, name: "Ameth" },
  { id: 2, name: "Gabriel" },
  { id: 3, name: "Andres" },
  { id: 4, name: "Victor" },
  { id: 5, name: "Ronald" },
  { id: 6, name: "Ana" },
  { id: 7, name: "Maria" },
]);
</script>

Para los que quieran usar la Composition API para hacer uso de route dentro del tag script, solo deben importar useRoute de vue-router, asignarlo a una variable y ya podrian acceder a lo largo del archivo

En caso de que alguien este teniendo problemas para acceder a los params de la ruta, es porque en Vue router v4 ha cambiado la manera en la que se accede a ellos. Aquí les dejare un ejemplo de como lo hice y es tan simple como asignar el “this.$router” a una variable. Despues de ello ya podemos acceder a su contenido de la siguiente manera:

<template>
  <div>
    <aside>
      <div v-for="chat in chats" :key="chat.id">
        <RouterLink :to="`/chats/${chat.id}`">{{ chat.name }}</RouterLink>
      </div>
    </aside>
    <article>{{ router.currentRoute.params.chatId }}</article>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      router: this.$router,
      chats: [
        { id: 1, name: 'Ximena' },
        { id: 2, name: 'Daniel' },
        { id: 3, name: 'Carlos' }
      ]
    }
  }
}
</script>