<target-language> Spanish </target-language> Navegación programática con Vue Router

Domina la navegación en aplicaciones de una sola página con View Router: desde crear rutas básicas y enlaces con Router Link, hasta manejar rutas dinámicas con parámetros, consumir la API por ID y hacer navegación programática con $router.push. Además, activa history mode para URLs limpias sin hash y mejora la UX con renderizado condicional.

¿Cómo crear rutas y navegar con elementos HTML?

Crear un componente simple y asociarlo a una ruta es el primer paso. Se construye About.vue dentro de Components con solo HTML y se define su ruta en routes.js. Al principio, la navegación por URL funciona con hash, pero la idea es ofrecer enlaces visibles al usuario con Router Link dentro de header.vue.

• Crea About.vue con un título Nosotros.
• Define la ruta en routes.js y pruébala escribiendo /about en la URL.
• Usa Router Link con la propiedad to para enlazar a rutas existentes.
• Ajusta paths coherentes: la ruta de búsqueda es '/'.
• También puedes pasar un objeto con v-bind:to para usar name en lugar de path.

Ejemplo de rutas en routes.js:

import About from '@/components/About.vue'

export default [
  { path: '/about', name: 'About', component: About },
  // raíz para buscar
  { path: '/', name: 'search', component: Search }
]

Ejemplos en header.vue con Router Link:

<nav class="nav-right nav-menu">
  <router-link class="nav-item" to="/">Buscar</router-link>
  <router-link class="nav-item" to="/about">Nosotros</router-link>
</nav>

<!-- usando objeto -->
<router-link class="nav-item" :to="{ name: 'search' }">Buscar</router-link>

Conceptos y habilidades clave:

• Router Link y propiedad to para navegación declarativa.
• v-bind y objetos con name para preparar rutas con parámetros.
• Coherencia de URLs y nombres de ruta.

¿Cómo construir rutas dinámicas con parámetros y consumir la API?

Para mostrar el detalle de una canción, se crea TrackDetail.vue y una ruta parametrizada. El patrón /track/:id permite cambiar el contenido según el id. Se integra un servicio que obtiene la canción por ID usando un template string de ECMAScript 2015 y se renderiza el componente PM track cuando la data está lista.

• Crea la ruta dinámica /track/:id en routes.js.
• Importa el componente Track y regístralo como pm-track.
• Implementa trackService.getById(id) con template string y .then para devolver la data.
• En el hook created, lee this.$route.params.id y consulta la API.
• Usa v-if para evitar renderizar hasta que existan track y track.album.
• Ajusta el layout con clases de Bulma: container, columns, column.

routes.js:

import TrackDetail from '@/components/TrackDetail.vue'

export default [
  { path: '/track/:id', name: 'track', component: TrackDetail }
]

services/track.js:

const trackService = {
  getById(id) {
    return platzyMusicService
      .get(`tracks/${id}`)
      .then(res => res.data)
  }
}
export default trackService

TrackDetail.vue:

<template>
  <section class="container columns" v-if="track && track.album">
    <div class="column is-5 is-offset-4">
      <pm-track :track="track" />
    </div>
  </section>
</template>

<script>
import Track from '@/components/Track.vue'
import trackService from '@/services/track'

export default {
  name: 'TrackDetail',
  components: { 'pm-track': Track },
  data() {
    return { track: {} }
  },
  created() {
    const id = this.$route.params.id
    trackService.getById(id).then(res => {
      this.track = res
    })
  }
}
</script>

<style scoped>
.columns { margin: 20px; }
</style>

Conceptos y habilidades clave:

• Ruta parametrizada con /track/:id para contenido dinámico.
• this.$route.params para leer parámetros de la URL.
• Consumo de API por ID y template strings con backticks.
• Renderizado condicional con v-if para evitar errores.
• Integración de componentes y layout con Bulma.

¿Cómo navegar programáticamente y activar history mode?

Cuando se necesita cambiar de ruta desde el código, se usa this.$router.push. Es clave diferenciar $route (información de la ruta actual) de $router (control del enrutador). Finalmente, al activar history mode, las URLs se limpian y desaparece el hash; se requiere soporte en el servidor.

• Agrega un gatillo UI (por ejemplo, un botón) que invoque goToTrack(id).
• Implementa goToTrack con this.$router.push y params dinámicos.
• Diferencia $route vs $router: información vs control.
• Activa mode: 'history' al crear el router.

Track.vue (método y uso):

<!-- dentro del template -->
<button @click="goToTrack(track.id)">🌐</button>

<script>
export default {
  methods: {
    goToTrack(id) {
      this.$router.push({ name: 'track', params: { id } })
    }
  }
}
</script>

main.js (history mode):

const router = new VueRouter({
  routes,
  mode: 'history'
})

Conceptos y habilidades clave:

• Navegación programática con this.$router.push y params.
• Uso del historial HTML5 coherente con push del router.
• history mode para URLs sin hash y consideraciones de servidor.

¿Tienes dudas o mejoras de UI que quieras proponer? Comparte tus comentarios y cuéntame qué reto implementarás primero.