Comment obtenir les paramètres du chemin de saut dans vue

Lors du routage dans Vue, vous devez souvent transmettre des paramètres. Alors comment faire passer les paramètres dans la page cible ? Cet article explique comment obtenir les paramètres du chemin de saut dans Vue.

Il existe deux façons de sauter des itinéraires dans Vue : utilisez le plug-in vue-router ou utilisez window.location.href directement sur la page pour sauter. Quoi qu’il en soit, la méthode d’obtention des paramètres du chemin de saut est similaire.

Utilisez le plug-in vue-router pour le saut de route

vue-router est un plug-in de routage officiellement fourni par Vue, qui peut nous aider à contrôler le routage dans Vue. Dans vue-router, les informations sur l'itinéraire actuel, y compris les paramètres du chemin de saut, peuvent être obtenues via l'objet $route.

Supposons que nous ayons une configuration de routage comme suit :

{
  path: '/detail/:id',
  component: Detail
}

Le :id indique ici qu'il s'agit d'un paramètre de chemin qui peut être transmis via le routage. Par exemple, /detail/123 représente la page de détails avec l'ID 123.

Dans la page cible Détail, nous pouvons obtenir les paramètres transmis via $route.params. Le code est le suivant :

export default {
  name: 'Detail',
  mounted() {
    const id = this.$route.params.id; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

Dans le hook monté, vous pouvez obtenir le paramètre id transmis dans le chemin de saut via this.$route.params.id.

Utilisez window.location.href directement dans la page pour le saut d'itinéraire

Dans Vue, nous pouvons également utiliser window.location.href directement pour le saut de page. Par exemple :

window.location.href = '/detail?id=123';

Ici, nous avons intégré le paramètre id dans l'URL de saut. Voyons comment obtenir ce paramètre dans la page cible.

Nous pouvons utiliser location.search pour obtenir la partie paramètre après le point d'interrogation dans le chemin de saut, puis utiliser la correspondance régulière pour obtenir la valeur du paramètre dont nous avons besoin. Le code est le suivant :

export default {
  name: 'Detail',
  mounted() {
    const query = location.search.substring(1); // 获取跳转路径参数字符串，去掉问号
    const reg = new RegExp(`(^|&)id=([^&]*)(&|$)`); // 匹配id参数的正则表达式
    const id = query.match(reg)[2]; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

Le code ci-dessus correspond à la valeur du paramètre id via des expressions régulières et la stocke dans la variable id.

Résumé

La méthode pour obtenir les paramètres du chemin de saut dans Vue est très simple Que ce soit en utilisant le plug-in vue-router ou en utilisant directement window.location.href pour sauter, nous pouvons nous appuyer sur des objets tels que $route ou location pour. obtenir le transfert des paramètres passés. Cet article présente deux méthodes. Les développeurs peuvent choisir la méthode qui leur convient en fonction de la situation réelle.

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!