Trois modes de base de transmission de paramètres dans le routage Vue (tutoriel détaillé)

Cet article présente principalement en détail les trois modes de base de transmission des paramètres dans le routage Vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Le routage est le pont reliant différentes pages et les paramètres jouent. Dans un certain sens, ils déterminent si les deux ponts peuvent être reliés avec succès.

Dans le routage vue, 3 méthodes de transmission de paramètres sont prises en charge.

Dans la scène, cliquez sur l'élément li du composant parent pour accéder au composant enfant, et transférez les paramètres pour permettre au composant enfant d'obtenir les données li correspondantes et d'afficher le contenu correct correspondant.

Dans le composant parent :

<li v-for="article in articles" @click="getDescribe(article.id)">

Option 1 :

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/describe/${id}`,
    })

// 方案一，需要对应路由配置如下：
  {
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }
// 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。

// 在子组件中可以使用来获取传递的参数值。
$route.params.id

Option deux :

// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
    this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//子组件中: 这样来获取参数
$route.params.id

Option 3 :

// 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
  this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

// 对应路由配置：
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

// 对应子组件: 这样来获取参数
$route.query.id

// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

À propos de la façon dont element-ui implémente la méthode de chargement progressif dans la table dans vue

À propos de l'optimisation des performances des composants React Explication détaillée

Comment utiliser vue pour recadrer des images tout en agrandissant, réduisant et faisant pivoter les fonctions (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!