Comment obtenir l'URL de la requête actuelle dans vue ? Une brève analyse des différentes méthodes

Vue est un framework front-end populaire qui vous permet de créer des interfaces utilisateur réactives. Au cours du processus de développement, nous avons souvent besoin d'obtenir l'URL de la page Web actuelle afin de pouvoir prendre différentes actions dans des situations spécifiques. Cet article présentera différentes méthodes pour obtenir l'URL de la requête actuelle dans Vue ainsi que leurs avantages et inconvénients.

1. window.location.href

Le moyen le plus simple est d'utiliser la propriété location de l'objet window pour obtenir l'URL de la page actuelle. Nous pouvons utiliser le code suivant dans le hook de cycle de vie monté du composant Vue :

mounted() {
  console.log(window.location.href);
}

Cela affichera l'URL de la page Web actuelle. L'avantage est que le code est facile à comprendre et à écrire, mais l'inconvénient est qu'il ne peut pas utiliser le mécanisme réactif de Vue. Si l'URL change, les données ne seront pas mises à jour automatiquement.

2. Vue Router

Vue Router est le gestionnaire de routage officiel de Vue et peut également être utilisé pour obtenir l'URL de la page actuelle. Il fournit plusieurs API pour obtenir différentes parties de l'URL, telles que le chemin, les paramètres de requête, les valeurs de hachage, etc. Voici quelques méthodes couramment utilisées :

• this.$route.path : obtenez le chemin actuel
• this.$route.query : obtenez les paramètres de la requête
• this.$route.hash : obtenez la valeur de hachage ; .

Si nous avons besoin d'obtenir le chemin actuel dans le composant Vue, nous pouvons utiliser le code suivant dans le hook de cycle de vie monté :

mounted() {
  console.log(this.$route.path);
}

Cela affichera le chemin actuel. L'avantage de Vue Router est qu'il peut utiliser le mécanisme réactif de Vue et fournit plus d'informations sur les URL. L’inconvénient est qu’il nécessite une configuration et une gestion supplémentaires.

3. Nuxt.js

Nuxt.js est un framework d'application universel basé sur Vue.js, qui peut nous aider à créer rapidement des applications Vue et à ajouter le rendu du serveur, la génération statique et d'autres fonctions. Dans Nuxt.js, nous pouvons obtenir l'URL actuellement demandée en utilisant l'objet contextuel dans asyncData ou en récupérant le composant Vue. Par exemple :

asyncData(context) {
  console.log(context.req.url);
}

Cela affichera l'URL de la requête actuelle. L'avantage de Nuxt.js est qu'il peut gérer de manière flexible diverses requêtes d'URL et prend en charge le rendu du serveur et la génération statique. L'inconvénient est que cela nécessite une certaine compréhension du framework Nuxt.js.

Résumé

Il existe de nombreuses façons d'obtenir l'URL de la page actuelle dans Vue, et chaque méthode a ses propres avantages et inconvénients. Si vous n'avez besoin d'obtenir qu'une partie de l'URL, vous pouvez utiliser window.location ou Vue Router ; si vous avez besoin d'obtenir l'URL complète et de prendre en charge les mises à jour réactives, vous pouvez utiliser Vue Router si vous avez besoin de gérer de manière flexible les demandes d'URL ; vous pouvez utiliser Nuxt.js. La méthode choisie dépend des besoins et des circonstances spécifiques.

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!