Crear y Navegar Rutas con router-link

Les recomiendo separar sus archivos de pagina dentro de una carpeta llamada view ya que este es el estandar que se usa para nombrar este tipo de componentes y poderlos diferenciar de los componentes normales, en este caso esos componentes serian Search, About y TrackDetails

Cuando se instancia el vue-router se obtienen 2 objetos:

• $route: la cual contiene información de un ruta especifica como parametros, url, path, etc

• $router: sirve para usar las funcionalidades del vue-router, como por ejemplo la navegación programática que vemos en esté capitulo del curso

$router -> sirve para navegar programáticamente y acceder a la funcionalidad del router
$route -> tiene información de la ruta especifica

Hola.
Cunado introduzco la linea:
Pm-track(:track=?)
me aparece el siguente error
1|

2| Pm-track(:track=?)
-------------------------------^
3|
Dicendome que no puede compilar por el signo de interrogacion.
Agradeceria ayuda

Estos serían los estilos de Bulma hoy para el navbar

<template lang="pug">
  section.hero.is-success
    .hero-head
      header.navbar
       .container
        .navbar-start
          .navbar-item
            strong 📻 Platzi Music
        .navbar-end.navbar-menu
          router-link.navbar-item(to="/") Buscar
          router-link.navbar-item(to="about") Nosotros
    .hero-body
      .container.has-text-centered
       h1.title Platzi Music
       h2.subtitle Canciones que están Vue-nísimas!
       pm-player
</template>

Buenas, tengo entendido que es posible pasar objetos por las rutas del vue-router, como puedo hacer eso?

Con base en algunos comentarios. Necesito me corrijan.
Es posible arreglar el error de todo SPA (ir hacia atras o hacia adelante) guardando la información dentro de localStorage?.
o existe otra manera

yo agregue el plugin de vuetify y en vez de usar clases de bulma utilice v-navigation-drawer de vuetify.

<template lang="pug">
section.hero.is-success
    .hero-head 
        header.nav
         v-app-bar
          v-app-bar-nav-icon(@click="drawer=true")
         v-navigation-drawer(v-model="drawer" absolute temporary)
          v-list(nav dense)
           v-list-item-group(v-model="group" active-class="deep-purple--text text--accent-4")
             v-list-item(link :to="{name:'search'}")
              v-list-item-title Buscar
                         
             v-list-item(link :to="{name:'About'}")
              v-list-item-title Nosotros

    .hero-body 
        .container.has-text-centered 
            h1.title Des Music
            h1.subtitle Busca tus canciones favoritas
            pm-player
</template>

https://des-music-app.netlify.app/

Me gusta que con esto se pueden crear SPA, aunque a mi por alguna razón me sigue mostrando el “#” en la URL…

Yo normalmente hago una carpeta llamada screens o pages y ahí coloco las páginas principales de mi aplicación

Agrego también lo siguiente yaque el profesor usa notaciones mas cortas, también pueden cambiar esas funciones a :

trackService.search = (q) => {}

trackService.getById = (id) => {}

Cada vez amo mas Vue.

Tengo éste error 😦

vue.esm.js?efeb:591 [Vue warn]: Unknown custom element: <spn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <PmTrack> at src/components/Track.vue
       <App> at src/components/Search.vue
         <App> at src/App.vue
           <Root>

Buenos días, Por favor me podrían ayudar con este mensaje de error,

HTTP402: PAGO OBLIGATORIO: el servidor exige que se realice un pago antes de continuar procesando solicitudes.
(Fetch)GET - https://platzi-music-api.now.sh/search?q=h&type=track

días atrás se podían consultar las canciones, ahora me sale este mensaje

Alguien hizo el reto de colocarle el loader?

Utilizando los componentes que ya tenemos agregué el loader y adicionalmente puse un catch para el caso de que no se encuentre un resultado, si ingresan algo por url:

<template lang="pug">
  div
    pm-notification(v-show="showNotification", :modalType='typeNotification')
      p(slot="body") {{ messageNotification }}
    .container
      .columns
        .column.is-5.is-offset-4
          pm-loader(v-show="isLoading")
          pm-track(:track="trackDetail")
</template>

<script>
import trackService from '@/services/track'
import PmTrack from '@/components/Track.vue'
import PmLoader from '@/components/shared/Loader.vue'
import PmNotification from '@/components/shared/Notification.vue'

export default {
  data(){
    return {
      trackDetail:{},
      isLoading: false,
      showNotification: false,
      messageNotification: '',
      typeNotification: ''
    }
  },
  components:{ PmTrack, PmLoader, PmNotification },
  created () {
    this.isLoading = true
    const id = this.$route.params.id
    trackService.getById(id)
      .then(res => {
        this.isLoading = false
        this.trackDetail = res
      })
      .catch(err => {
        this.isLoading = false
        this.showNotification = true
        this.messageNotification = '¡No se encontraron resultados!'
        this.typeNotification = 'is-danger'
      })
  }
}
</script>
<style lang="scss" scoped>
  .columns {
    margin: 20px;
  }
</style>

Excelente

<router-link> es el componente para habilitar la navegación del usuario en una aplicación habilitada para enrutador. La ubicación de destino se especifica con el prop. Se representa como una etiqueta <a> con href correcto de forma predeterminada, pero se puede configurar con la etiqueta prop. Además, el enlace obtiene automáticamente una clase CSS activa cuando la ruta de destino está activa.
<router-link> se prefiere sobre <a href="…"> codificado por las siguientes razones:

• Funciona de la misma manera tanto en el modo de historial HTML5 como en el modo hash, por lo que si alguna vez decide cambiar de modo, o cuando el enrutador vuelve al modo hash en IE9, no necesita cambiar nada.
• En el modo de historial HTML5, el enlace del enrutador interceptará el evento de clic para que el navegador no intente volver a cargar la página.
• Cuando usa la opción base en el modo de historial HTML5, no necesita incluirla en las URL de los accesorios.

Ojo cuando menciona la configuración del servidor web, es importante saber que en nginx es posible configurar todos los llamados a un index.php por ejemplo, en Laravel para usar Vuex solo se requiere aparte de la configuración del Nginx, crear una ruta donde “caigan” todos los request, esta puede ser usada sola o con otras rutas a otras paginas en cuyo caso debiera ir como la ultima ruta haciendo una suerte de fallback, saludos!

En vue3 el hash aparece en la url si en el momento en que activamos el modo history usamos el metodo

createWebHashHistory

y para que este hash no aparezca debemos usar el metodo

createWebHistory

Si estan usando Vue3 puede que se les haya generado un error la forma mas facil de resolver esto es en vez de pasar el objeto en

this.$router.push({ name: "track", params: {id})

puedes pasar la variable dentro de un string con los template literals

this.$router.push(`/track/${id}`)

03:48 am, creo que debería ir a dormir.

Si alguien está viendo este curso recientemente la propieda nav en las versiones nuevas al parecer no lo carga igual, puedes solucionarlo agregando navbar