A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Crear y Navegar Rutas con router-link

33/53
Recursos

Aportes 24

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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>

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 鈥渃aigan鈥 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