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 “teoria” 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 “vamo’a se’feli” “vamo’a se’feli” feliiices los cuaAatroOOoo XDXDXDXDD que chimbo que la api no este funcionando :’/, ¿Como prodria yo replicar esa api?