Introducción

1

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

2

Vue.js: Desarrollo de Aplicaciones Web Profesionales

3

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

4

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

5

Uso de Expresiones JavaScript en Plantillas de Vue.js

6

Directivas para Atributos Dinámicos en HTML con Vue.js

7

Directivas de Renderizado Condicional en HTML con Vue.js

8

Uso de la Directiva v-for en Vue.js para Renderizar Listas

9

Manejo de Eventos en Vue.js: Click y Mouseover

10

Condiciones y Clases Dinámicas en Vue.js

11

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

12

Propiedades Computadas y Watchers en Vue.js

13

Interacción dinámica con formularios y directivas en Vue.js

14

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

15

Sistema de Componentes en Fren Word: Modularización y Reutilización

16

Creación de Componentes Personalizados en Vue.js

17

Comunicación entre Componentes en Vue.js: Props y Data Binding

18

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

19

Uso de Slots para Inyectar HTML en Componentes Hijos

20

Ciclo de Vida de Componentes en Vue.js

21

Componentes de Vue: Creación y Gestión Eficiente

22

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

23

Configuración Profesional de Vue.js con Visual Studio Code

24

Creación de Aplicaciones con Dios CLI y su Configuración Básica

25

Componentes de Archivo Único en Vue.js

26

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

27

Instalación y configuración de Tailwind CSS en proyectos HTML

28

Creación y Gestión de Componentes VUE en Proyectos Web

29

Creación de Aplicaciones SPA con Vue Router

30

Uso de Fetch API para Interactuar con Servidores HTTP

31

Filtros y Directivas para Mejorar Interfaces en JavaScript

32

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

33

Navegación Dinámica y Programática en Vue.js

34

Integración de Componentes de Terceros en Proyectos Vue.js

35

Manejo de Problemas de Reactividad en Vue.js

36

Filtros y Ordenamiento en Tablas de Datos con JavaScript

37

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

38

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Navegación Dinámica y Programática en Vue.js

33/38
Recursos

¿Cómo navegar automáticamente por las rutas?

Proveer una navegación intuitiva para el usuario es crucial en cualquier aplicación web. Sin ella, cambiar la URL manualmente puede resultar en una experiencia de usuario poco amigable. Afortunadamente, hay formas de manejar esto eficientemente utilizando Vue Router. Vamos a ver cómo puedes mejorar la navegación y dinamismo de tus componentes.

Uso de router-link para enlaces dinámicos

Cuando queremos que los usuarios puedan navegar fácilmente entre diferentes páginas de una aplicación Vue.js, el componente router-link es esencial. Este componente permite a los usuarios hacer clic y ser redirigidos a diferentes rutas de manera fluida y dinámica.

<router-link :to="{ name: 'Next', params: { id: a.id } }">
  <!-- Contenido del Link -->
</router-link>
  • params se usará para añadir datos dinámicos como identificadores.
  • Utiliza v-bind (:) para enlazar con la propiedad de Vue, permitiendo manejar enlaces dinámicos.

Mejorando la interfaz con estilos

Además de hacer enlaces navegables, es importante mejorar su aspecto. Agregar clases CSS para efectos visuales como cambios de color al hacer hover mejorará la experiencia del usuario.

<router-link
  :to="{ name: 'Next', params: { id: a.id } }"
  class="hover:text-green-500"
>
  <!-- Contenido del Link -->
</router-link>

Redirecciones a la página principal

Para ofrecer un acceso directo a la home desde cualquier punto de la aplicación, reemplaza etiquetas de texto planas con router-link. Esto permite que los usuarios vuelvan a la página principal fácilmente.

<router-link to="/">
  Platzi PKG
</router-link>

¿Cómo utilizar métodos programáticos para la navegación?

Los métodos programáticos proporcionan una manera más controlada de cambiar rutas desde funciones dentro de los componentes. Es particularmente útil en respuesta a acciones del usuario como clics en botones.

Creación de un componente de botón

Primero, creamos un componente de botón que hará la navegación cuando se interactúe con él. Este botón se puede estilizar como queramos para que se adecue al diseño de nuestra aplicación.

<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'PXButton',
  methods: {
    handleClick() {
      this.$emit('custom-click');
    }
  }
}
</script>

Manejo de la navegación desde el botón

Dentro del componente donde se use el botón, es posible definir un método que maneje la navegación de manera programática utilizando el objeto $router.

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

Enlaza este método al evento del botón. Asegúrate de pasar correctamente cualquier parámetro dinámico necesario:

<template>
  <PXButton @custom-click="goToCoin(a.id)">Detalle</PXButton>
</template>

Con estas técnicas, puedes ofrecer una experiencia de usuario más fluida e integrar funcionalidades de navegación robustas en tus aplicaciones Vue.js. Continúa explorando y aplicando estas herramientas para descubrir su pleno potencial.

Aportes 19

Preguntas 11

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

chorro de clases del botón Detalle:

bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-2 border border-green-500 hover:border-transparent rounded

Pero fuera de bromas: ¿Está mal la alternativa que usé mientras me adelantaba a ti?

v-on == @
v-bind == :

Como sabran vengo haciendo una versión adaptada en bootstrap, voy pasando mis resultados.

Navegación Programática:

this.$router.push({name: component, params:valueId})

shorthand: “v-on:” por “@”

En los personal me gusta mas poner el link directamente en el botón, siento que esto del this.$router.push() es más para hacer redirecciones desde el código xD Algo así como un document.location.href

Hay alguna diferencia entre las 2 maneras de hacer las rutas?
router-link vs $router.push ?

Si this te aparece como undefined y no puedes usar this.$router, puede ser que estes usando un arrow function en lugar de una función normal.

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch(‘a’, newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Me costo mucho entender que hacia mal, espero que le sirva a alguien. ;D

Creo que es mejor usar elementos nativos como el anchor, cuando queremos cambiar de rutas en la app. Ya que de esa manera ayuda al SEO y a los motores de búsqueda a detectar los links disponibles en nuestra web.

En resumen, creo que es mejor usar <router-link to="… en vez de <button @click=“goToSomeRoute” 🤔

Alguien podria aclararme cual es la diferencia entre “$route” y “$router”? Es decir, a que estan haciendo referencia cada uno?

Aunque esta opción de:

  • crear un componente botón
  • Emitir un evento
  • Subscribirse al evento
  • Y por último redireccionar

parece mucho esfuerzo para un simple redirección, te da ideas para más adelante hacer cosas personalizadas. Por ejemplo si quisieras guardar algunas estadísticas o enviar otra información paralela a otro lugar.

y si se hace de esta manera que ventajas o deficiencias habria?
<router-link :to="coin/${a.id}">

Saben por qué cuando creo un repositorio local con git no sirve el servidor CLI? Cada vez que guardo un cambio debo volver a correr el comando npm run serve.

Logré hacer que muestre la información de las criptomonedas.
Primero, creamos un archivo vue.config.js:

module.exports = {
  devServer: {
    proxy: "https://api.coincap.io/v2/assets/",
  },
};

Y, tuve que eliminar la imagen pues parece que ya no encuentra esta información:

<template>
  <div class="flex-col">
    <template>
      <div class="flex flex-col sm:flex-row justify-around items-center">
        <div class="flex flex-col items-center">
          <h1 class="text-5xl">
            {{ asset.name }}
            <small class="sm:mr-2 text-gray-500">{{ asset.symbol }}</small>
          </h1>
        </div>

        <div class="my-10 flex flex-col">
          <ul>
            <li class="flex justify-between">
              <b class="text-gray-600 mr-10 uppercase">Ranking</b>
              <span>#{{ asset.rank }}</span>
            </li>
            <li class="flex justify-between">
              <b class="text-gray-600 mr-10 uppercase">Precio actual</b>
              <span>{{ asset.priceUsd | dollar }}</span>
            </li>
            <li class="flex justify-between">
              <b class="text-gray-600 mr-10 uppercase">Precio más bajo</b>
              <span>{{ min | dollar }}</span>
            </li>
            <li class="flex justify-between">
              <b class="text-gray-600 mr-10 uppercase">Precio más alto</b>
              <span>{{ max | dollar }}</span>
            </li>
            <li class="flex justify-between">
              <b class="text-gray-600 mr-10 uppercase">Precio Promedio</b>
              <span>{{ avg | dollar }}</span>
            </li>
            <li class="flex justify-between">
              <b class="text-gray-600 mr-10 uppercase">Variación 24hs</b>
              <span>{{ asset.changePercent24Hr | percent }}</span>
            </li>
          </ul>
        </div>

        <div class="my-10 sm:mt-0 flex flex-col justify-center text-center">
          <button
            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
          >
            Cambiar
          </button>

          <div class="flex flex-row my-5">
            <label class="w-full" for="convertValue">
              <input
                id="convertValue"
                type="number"
                class="text-center bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
              />
            </label>
          </div>

          <span class="text-xl"></span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import api from "@/api";

export default {
  name: "CoinDetail",

  data() {
    return {
      asset: {},
      history: [],
    };
  },

  computed: {
    min() {
      return Math.min(
        ...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
      );
    },

    max() {
      return Math.max(
        ...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
      );
    },

    avg() {
      return (
        this.history.reduce((a, b) => a + parseFloat(b.priceUsd), 0) /
        this.history.length
      );
    },
  },

  created() {
    this.getCoin();
  },

  methods: {
    getCoin() {
      const id = this.$route.params.id;
      Promise.all([api.getAsset(id), api.getAssetHistory(id)]).then(
        ([asset, history]) => {
          this.asset = asset;
          this.history = history;
        }
      );
    },
  },
};
</script>

<style scoped>
td {
  padding: 10px;
  text-align: center;
}
</style>

Es posible observar la acción de cambio de rutas?

la navegacion programatica es otra forma que tenemos de crear rutas para navegar en el sitio.

casi me pierdo!!!

alguien sabe por que sucede esto? pero en el navegor funciona bien el error me dio cuando copie el archivo CoinDetail.vue que esta en Archivos y enlaces.

![](