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

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:23

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

Curso Básico de Vue.js 2

Clase 33 de 38

Clase 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.

Jordan Rodriguez

Hace 5 años

Hola, Antes que nada me gustaria indicar que es un grandioso curso. Me gustaria que me puediera ayudar de como poder resolver este probleme, que aparece en el explorador cuando consulto a los apis. Tengo que refrescar varias veces para que se pueda hacer la consulta al api

XHRGEThttps://api.coincap.io/v2/assets/binance-coin CORS Missing Allow Origin

XHROPTIONShttps://api.coincap.io/v2/assets/binance-coin/history?interval=d1 CORS Missing Allow Origin

Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://api.coincap.io/v2/assets/binance-coin (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').

Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://api.coincap.io/v2/assets/binance-coin/history?interval=d1 (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en https://api.coincap.io/v2/assets/binance-coin/history?interval=d1. (Razón: Solicitud CORS sin éxito).

Jose Flores

Hace 5 años

yo lo resolvi asi

const url = "https://api.coincap.io/v2";

function getAssets() {
  return fetch(`${url}/assets?limit=20`, {
    mode: "cors",
    method: "GET",
    headers: {
      Accept: "application/json"
    }
  })
    .then(res => res.json())
    .then(res => res.data);
}

export default {
  getAssets
};

Solo que al momento de visualizarlo lo hago desde la ip y no desde el localhost, que son las opciones que salen cuando utilizas npm run serve, por alguna razón no funciona desde la opción de localhost

Doniel Alberto Acosta Contreras

Hace 5 años

justo tambien tengo esta misma duda que te salio en el curso si pudiste resolver?

Comentarios (30)30 comentarios

Emerson Cedeño

Hace 7 años

Franz Pool Nuñez Villazana

Hace 6 años

Sebastián Buitrago

Jesus David Urquijo Corredor

Nacho Anaya

Profesor

Jose Luis Campos Bautista

José Sebastián Garcia

Fabián Antonio Salgado Sepúlveda

Carlos Eduardo Gomez García

Lucas Durán

Juan David Diaz

Luis Gerardo López Hernández

Guillermo Vara De Gante

Massimo Di Berardino

Jefferson Andres Espejo Goez

Diego Artiles

Francisco Ruiz

Diego Forero

Team Platzi

Andres Pinzon

José Alfonso Vargas Cruz

Ronald Gamaliel Perez Talavera

Paola Duran

Hace 4 años

Ermilo Joel Dorantes Uc

Diego Antonio Briones Martínez

DAISY CORDOVA

Carlos Daniel

Juan Victor Bascope Castro

Omar Daniel Centeno

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

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

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

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

Directivas de Renderizado Condicional en HTML con Vue.js

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

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

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

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

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

Creación de Componentes Personalizados en Vue.js

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

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

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

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

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

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

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

Componentes de Archivo Único en Vue.js

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

Platzi Exchange

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

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

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

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

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

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

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

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

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

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