Comment supprimer les paramètres d'URL dans vue

Vue.js est un framework JavaScript populaire pour créer des applications Web interactives et des applications monopage. Lors du développement d'applications Vue.js, vous devez souvent gérer les paramètres d'URL.

Dans Vue.js, vous pouvez utiliser l'objet $route pour obtenir des informations sur l'itinéraire actuel, y compris les paramètres de l'URL actuelle. Cependant, il est parfois nécessaire de supprimer des paramètres dans l'URL. Cet article explique comment supprimer les paramètres d'URL dans Vue.js.

Obtenir les paramètres d'URL

Dans Vue.js, vous pouvez utiliser l'objet $route pour obtenir des informations sur l'itinéraire actuel, y compris les paramètres dans l'URL. L'objet $route contient de nombreux attributs, parmi lesquels l'attribut params contient des paramètres de routage.

this.$route.params.id // 获取名为"id"的参数值

Par exemple, dans l'itinéraire suivant :

path: '/users/:id'

Vous pouvez utiliser le code suivant pour obtenir la valeur du paramètre nommé "id" :

this.$route.params.id // 获取名为"id"的参数值

Suppression des paramètres d'URL

Parfois, nous devons supprimer un ou plusieurs paramètres du paramètre d'URL actuel. Voici quelques moyens d’atteindre cet objectif.

Méthode 1 : utilisez la méthode $router.replace

Vous pouvez utiliser la méthode $router.replace pour supprimer des paramètres dans l'URL. Cette méthode est utilisée pour accéder à une nouvelle URL et ne génère pas de nouvel enregistrement d'historique.

this.$router.replace({ path: '/users', query: { page: null } })

Dans le code ci-dessus, nous avons utilisé null pour effacer le paramètre nommé "page". Cela naviguera vers la route /users sans transmettre aucun paramètre.

Méthode 2 : utilisez la méthode $router.push

La méthode $router.push est similaire à la méthode $router.replace, mais elle génère de nouveaux enregistrements d'historique.

Vous pouvez utiliser la méthode $router.push pour générer une nouvelle URL sans certain paramètre.

this.$router.push({ path: '/users', query: { page: null } })

Dans le code ci-dessus, nous avons utilisé null pour effacer le paramètre nommé "page". Cela naviguera vers la route /users sans transmettre aucun paramètre.

Méthode 3 : utilisez la méthode $route.replace

La méthode $route.replace est utilisée pour naviguer vers une nouvelle URL, mais elle ne génère pas de nouvel enregistrement d'historique.

this.$route.replace({ path: '/users', query: { page: null } })

Dans le code ci-dessus, nous avons utilisé null pour effacer le paramètre nommé "page". Cela naviguera vers la route /users sans transmettre aucun paramètre.

Méthode 4 : utilisez $route.query

Vous pouvez utiliser $route.query pour accéder aux paramètres de l'URL actuelle et y supprimer un certain paramètre.

const query = Object.assign({}, this.$route.query)
delete query.page
this.$router.replace({ path: '/users', query: query })

Dans le code ci-dessus, nous avons utilisé la méthode Object.assign pour créer une copie de la propriété $route.query. Nous utilisons ensuite la méthode delete pour supprimer le paramètre nommé « page » et la méthode $router.replace pour naviguer dans l'URL mise à jour dans le navigateur.

Conclusion

Dans Vue.js, il existe plusieurs méthodes que vous pouvez utiliser pour supprimer des paramètres des URL. Ces méthodes incluent $router.replace, $router.push, $route.replace et $route.query. Choisir la méthode appropriée en fonction des besoins réels permet de mieux gérer les paramètres d'URL.

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!