A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Instalar vue-router y configurar router view

32/53
Recursos

Aportes 13

Preguntas 1

Ordenar por:

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

Felices los cuatro 馃槃

Si estan usando vue3 el comando para instalar vue-router es

npm install vue-[email protected]4

y quedaria configurado de esta manera

router.js

import { createRouter, createWebHistory } from "vue-router"
import Search from "../views/Search.vue"

const routes = [
	{
		path: "/",
		name: "Search",
		component: Search,
	},
]

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes,
})

export default router

en el main.js quedaria asi

import { createApp } from "vue"
import App from "./App.vue"
import router from '@/router'

const app = createApp(App)
app.mount("#app")
app.use(router)


o tambien podria quedar asi

import { createApp } from "vue"
import App from "./App.vue"
import router from "@/router"

createApp(App)
	.mount("#app")
	.use(router)

Una forma m谩s simple de hacer esto es ejecutar el comando:

vue add router

Solito hace las configuraciones, al ejecutarlo recomiendo tener el archivo App.vue abierto ya que este comando sobreescribir谩 el archivo, asi cuando lo sobreescriba simplemente hacen ctrl + z

Aunque Vue no correra el comando hasta que hagan commit de sus cambios

Funciona tanto para Vue 2 como para Vue 3

Yo cambie de:
.content(v-if="track && track.album")
a solo:
.content(v-if="track.album")

Debido a que ya hemos registrado el track objecto.
Saludos

yo empez茅 el curso usando el CLI de VUE, y agregue Router a mi proyecto desde un principio, lo que empec茅 a usar las vistas y componentes

No es mejor el

img(v-if="track && track.album")

Poner esa condicional en el content? ya que en 鈥渢eoria鈥 no existe aun tampoco el track como para cargar un source

Yo agregue una notificaci贸n de que si la canci贸n no tiene un previw me mande una notificaci贸n de que la canci贸n no lo tiene disponible
Comparto mi codigo

<template lang="pug">
    .content(v-if="showNotification")
        .notification.is-danger
            p Lo siento la cancion no tiene un previw disponible!
    .content(v-else-if="track.album && track.preview_url")
        p
            img(:src="track.album.images[0].url")
        p
            strong  {{ track.name }}
            small   [{{ track.duration_ms }}]
        p 
            audio(controls, v-bind:src="track.preview_url" )




</template>


<script>
export default {
    
    data () {
        return {
            track: {},
            showNotification: false
        }
    },

    created () {
        this.$bus.$on('set-track', (track)=> {
            this.track = track
            if (!this.track.preview_url) {
                this.showNotification=true
            }           
        })
    },

    watch: {
        showNotification () {
            if (this.showNotification) {
            setTimeout( () => {
                this.showNotification = false
            }, 3000 )
            }
        }
    },

}
</script>

Para el Player.vue:

<template lang="pug">
.content(v-if="track.name")
  p.is-128x128
    img(:src="track.album.images[0].url")
  p
    strong {{ track.name }}
    span  - {{ track.artists[0].name }}
  audio(v-show="track.preview_url", controls, :src="track.preview_url", style="height: 60px;")
</template>

7:16 cuando quita la importaci贸n de footer y header, atom marca un error en la linea 43 'PmFooter' is not defined, alguien sabe como se llama ese plugin?

Ya busqu茅 en los plugins un monton de linterns pero ninguno parece funcionar correctamente

Todo va cobrando sentido ahora.
Las rutas hacen referencia a componentes de Vue para renderizarlos dentro del tag <vue-router>
Dichos componentes pueden tener dentro referencias a otros componentes. VAYA ahora si entiendo por que lo asocian con los cuadritos de LEGGO.

Changos, al inicio deb铆 hacer un git init de mi proyecto, ahora tengo que estar comentando muchas partes del mismo para no perder la secuencia del curso.

Hemos visto lo basi con VUE ROUTER, como instalarlo, crear rutas, asociar rutas a componenetes.

ME ENCANTAAaaaaaAAaaaaAAaaaaAAAaaaAAaaaaAAaaaaAAA JAJAJAJAJAJAJAJAJAJ 鈥渧amo鈥檃 se鈥檉eli鈥 鈥渧amo鈥檃 se鈥檉eli鈥 feliiices los cuaAatroOOoo XDXDXDXDD que chimbo que la api no este funcionando :鈥/, 驴Como prodria yo replicar esa api?