es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo agrego el nombre del producto en la URL en mi aplicación Vue.JS utilizando Vue Router?

¿Cómo agrego el nombre del producto en la URL en mi aplicación Vue.JS utilizando Vue Router?

29 May, 2023 Programación

Quiero agregar dinámicamente el nombre del producto en la URL. Actualmente es “http://localhost:8080/product/?ID=1”. Quiero que sea “http://localhost:8080/product/Iphone-11-Pro?ID=1”

Aquí está el código de router-link en el archivo .vue 

<router-link :to="{ path: '/product/' + product.name, query: { ID: item.id } }">...</router-link>

Aquí está el archivo de router Vue 

{
  path: "/product/:name",
  name: "SingleProduct",
  component: SingleProduct,
},
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar dinámicamente el nombre del producto en la URL, se puede agregar un nuevo parámetro de ruta al camino del enrutador. Así es como se puede modificar el código:

    En el código de enlace del enrutador:

    <router-link :to="{ path: `/product/${item.productName}`, query: { ID: item.id }}">...</router-link>

    Observe que hemos agregado un nuevo parámetro de ruta ${item.productName} en el camino.

    En el archivo de enrutador:

    {
  path: "/product/:productName",
  name: "SingleProduct",
  component: SingleProduct,
},

    Aquí, hemos agregado un nuevo parámetro de ruta :productName al camino. Este parámetro capturará el nombre del producto de la URL.

    Ahora, cuando haga clic en el enlace del enrutador, la URL se generará en el formato http://localhost:8080/product/Iphone-11-Pro?ID=1`, dondeIphone-11-Pro` es el nombre del producto capturado del parámetro de URL.

Comments are closed.