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

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.

![](