Comment utiliser vue pour participer au routeur

Cette fois, je vais vous montrer comment utiliser le routeur Vue pass et quelles sont les précautions lors de l'utilisation du routeur Vue pass. Voici des cas réels, jetons un coup d'œil.

Méthode de transmission des paramètres Vue 1

1, configuration du routage

 {
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

2, méthode d'utilisation

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })

3. Méthode d'obtention (sur la page de description)

$route.params.id

Utilisez la méthode ci-dessus pour obtenir la valeur d'identification transmise à partir de la page précédente

vue Deuxième méthode de passage des paramètres

1. Configuration du routage

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
（这个地方默认配置就可以了，不用做任何的处理）

2. Utilisation de la méthode

  this.$router.push({
   name: 'Describe',
   params: {
   id: id
   }
  })

Dans le composant parent : via le routage attribut Le nom est utilisé pour déterminer l'itinéraire correspondant et les paramètres sont transmis via params.

3. Méthode d'obtention (sur la page de description)

$route.params.id

Vous pouvez également utiliser des paramètres pour l'obtenir

Méthode de passage des paramètres Vue ; trois

1. Configuration du routage

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }

(configuration par défaut)

2. Utilisation

 this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
（params换成了query）

3. Méthode d'obtention (sur la page de description)

$route.query.id

(Cet endroit utilise une requête pour obtenir également l'identifiant. La différence avec les paramètres obtenus précédemment est que la valeur de l'identifiant obtenue avec la requête sera affichée dans l'URL, comme vous pouvez le voir La valeur que vous avez transmise)

Méthode de transmission de la valeur des accessoires

Composant parent

(les données de table peuvent être utilisé n'importe où Prenez un nom, pas une valeur spécifique)

<p class="content">
//这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

Sous-composant

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

prop est une liaison unidirectionnelle et les accessoires ne doivent pas être modifiés à l'intérieur du sous-composant. Cependant, la valeur transmise par les accessoires ici changera à mesure que la valeur du composant parent change, ce qui constitue un changement dynamique.

Conseils d'utilisation de $route

1, $route.path

Type : chaîne

String , correspondant au chemin de la route actuelle, est toujours résolue en un chemin absolu, tel que "/foo/bar".

2, $route.params

Type : Objet

　Un objet clé/valeur, comprenant des fragments dynamiques et des fragments correspondants complets, s'il n'y a pas de paramètres de routage , est un objet vide.

3, $route.query

Type : Objet

Un objet clé/valeur représentant les paramètres de requête d'URL. Par exemple, pour le chemin /foo?user=1, $route.query.user == 1, ou un objet vide s'il n'y a aucun paramètre de requête.

4, $route.hash

Type : chaîne

La valeur de hachage de la route actuelle (avec #), s'il n'y a pas de valeur de hachage, c'est un vide chaîne.

5, $route.fullPath

Type : chaîne

L'URL une fois l'analyse terminée, y compris le chemin complet des paramètres de requête et du hachage.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment résoudre rapidement le paramètre chinois de transmission de requête jQuery tronqué

Comment utiliser PHP pour empêcher le formulaire duplication Soumettre

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!