Voici l'exemple dans la documentation:
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
Réf: https://router.vuejs.org/en/essentials/navigation.html
Comme mentionné dans ces documents, router.replace
fonctionne commerouter.push
Donc, vous semblez avoir raison dans votre exemple de code en question. Mais je pense que vous devrez peut-être inclure l'un name
ou l' autre path
paramètre également, de sorte que le routeur ait un itinéraire vers lequel naviguer. Sans un name
ou path
, cela n'a pas l'air très significatif.
C'est ma compréhension actuelle maintenant:
query
est facultatif pour le routeur - quelques informations supplémentaires pour que le composant construise la vue
name
ou path
est obligatoire - il décide du composant à afficher dans votre <router-view>
.
Cela pourrait être l'élément manquant dans votre exemple de code.
EDIT: Détails supplémentaires après commentaires
Avez-vous essayé d'utiliser des routes nommées dans ce cas? Vous avez des routes dynamiques et il est plus facile de fournir des paramètres et des requêtes séparément:
routes: [
{ name: 'user-view', path: '/user/:id', component: UserView },
// other routes
]
puis dans vos méthodes:
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })
Techniquement, il n'y a pas de différence entre ce qui précède et this.$router.replace({path: "/user/123", query:{q1: "q1"}})
, mais il est plus facile de fournir des paramètres dynamiques sur des routes nommées que de composer la chaîne de route. Mais dans les deux cas, les paramètres de requête doivent être pris en compte. Dans les deux cas, je n'ai rien trouvé de mal dans la façon dont les paramètres de requête sont traités.
Une fois que vous êtes à l'intérieur de la route, vous pouvez récupérer vos paramètres dynamiques en tant que this.$route.params.id
et vos paramètres de requête en tant que this.$route.query.q1
.
Sans recharger la page ou actualiser le dom,
history.pushState
peut faire le travail.Ajoutez cette méthode dans votre composant ou ailleurs pour ce faire:
Donc, n'importe où dans votre composant, appelez
addParamsToLocation({foo: 'bar'})
pour pousser l'emplacement actuel avec les paramètres de requête dans la pile window.history.Pour ajouter des paramètres de requête à l'emplacement actuel sans pousser une nouvelle entrée d' historique , utilisez à la
history.replaceState
place.Testé avec Vue 2.6.10 et Nuxt 2.8.1.
Soyez prudent avec cette méthode!
Vue Router ne sait pas que l'URL a changé, elle ne reflète donc pas l'URL après pushState.
la source
En fait, vous pouvez simplement pousser une requête comme ceci:
this.$router.push({query: {plan: 'private'}})
Basé sur: https://github.com/vuejs/vue-router/issues/1631
la source
la source
Error: Avoided redundant navigation to current location
this.$router.push({ query: Object.assign({...this.$route.query}, { new: 'param' }) })
this.$router.push({ query: {...this.$route.query,new: 'param'},) })
Si vous essayez de conserver certains paramètres, tout en modifiant d'autres, assurez-vous de copier l'état de la requête du routeur de vue et de ne pas la réutiliser.
Cela fonctionne, puisque vous faites une copie non référencée:
tandis que ci-dessous conduira Vue Router à penser que vous réutilisez la même requête et conduira à l'
NavigationDuplicated
erreur:Bien sûr, vous pouvez décomposer l'objet de requête, comme suit, mais vous devez connaître tous les paramètres de requête de votre page, sinon vous risquez de les perdre dans la navigation résultante.
Notez que bien que l'exemple ci-dessus soit pour
push()
, cela fonctionnereplace()
aussi avec .Testé avec vue-router 3.1.6.
la source
Pour ajouter plusieurs paramètres de requête, c'est ce qui a fonctionné pour moi (à partir d'ici https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5 ).
la source
Pour définir / supprimer plusieurs paramètres de requête à la fois, je me suis retrouvé avec les méthodes ci-dessous dans le cadre de mes mixins globaux (
this
point vers le composant vue):la source
J'utilise normalement l'objet historique pour cela. Il ne recharge pas non plus la page.
Exemple:
la source
Voici ma solution simple pour mettre à jour les paramètres de requête dans l'URL sans actualiser la page. Assurez-vous que cela fonctionne pour votre cas d'utilisation.
la source