Hier ist das Beispiel in Dokumenten:
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
Ref: https://router.vuejs.org/en/essentials/navigation.html
Wie in diesen Dokumenten erwähnt, router.replace
funktioniert wierouter.push
Sie scheinen es also richtig in Ihrem fraglichen Beispielcode zu haben. Ich denke jedoch, dass Sie möglicherweise auch einen name
oder einen path
Parameter einschließen müssen , damit der Router über eine Route verfügt, zu der er navigieren kann. Ohne ein name
oder path
sieht es nicht sehr aussagekräftig aus.
Dies ist mein derzeitiges Verständnis:
query
ist für den Router optional - einige zusätzliche Informationen für die Komponente zum Erstellen der Ansicht
name
oder path
ist obligatorisch - es entscheidet, welche Komponente in Ihrem angezeigt werden soll <router-view>
.
Dies könnte das fehlende Element in Ihrem Beispielcode sein.
EDIT: Zusätzliche Details nach Kommentaren
Haben Sie in diesem Fall versucht, benannte Routen zu verwenden? Sie haben dynamische Routen und es ist einfacher, Parameter und Abfragen separat bereitzustellen:
routes: [
{ name: 'user-view', path: '/user/:id', component: UserView },
// other routes
]
und dann in Ihren Methoden:
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })
Technisch gibt es keinen Unterschied zwischen den oben genannten und this.$router.replace({path: "/user/123", query:{q1: "q1"}})
, aber es ist einfacher, dynamische Parameter auf benannten Routen anzugeben, als die Routenzeichenfolge zu erstellen. In beiden Fällen sollten jedoch Abfrageparameter berücksichtigt werden. In beiden Fällen konnte ich keine Fehler bei der Behandlung von Abfrageparametern feststellen.
Nachdem Sie sich innerhalb der Route befinden, können Sie Ihre dynamischen Parameter als this.$route.params.id
und Ihre Abfrageparameter als abrufen this.$route.query.q1
.
Ohne die Seite neu zu laden oder den Dom zu aktualisieren,
history.pushState
kann der Job erledigt werden.Fügen Sie diese Methode in Ihre Komponente oder anderswo ein, um dies zu tun:
Rufen Sie also irgendwo in Ihrer Komponente auf,
addParamsToLocation({foo: 'bar'})
um den aktuellen Speicherort mit Abfrageparametern im Fenster window.history zu verschieben.Verwenden Sie stattdessen , um dem aktuellen Speicherort Abfrageparameter hinzuzufügen, ohne einen neuen Verlaufseintrag
history.replaceState
zu verschieben.Getestet mit Vue 2.6.10 und Nuxt 2.8.1.
Seien Sie vorsichtig mit dieser Methode!
Vue Router weiß nicht, dass sich die URL geändert hat, sodass sie die URL nach pushState nicht wiedergibt.
quelle
Eigentlich können Sie die Abfrage einfach wie folgt pushen:
this.$router.push({query: {plan: 'private'}})
Basierend auf: https://github.com/vuejs/vue-router/issues/1631
quelle
quelle
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'},) })
Wenn Sie versuchen, einige Parameter beizubehalten, während Sie andere ändern, müssen Sie den Status der Vue-Router-Abfrage kopieren und nicht wiederverwenden.
Dies funktioniert, da Sie eine nicht referenzierte Kopie erstellen:
Der folgende Abschnitt führt dazu, dass Vue Router denkt, dass Sie dieselbe Abfrage wiederverwenden, und führt zu dem
NavigationDuplicated
Fehler:Natürlich können Sie das Abfrageobjekt wie folgt zerlegen, aber Sie müssen alle Abfrageparameter Ihrer Seite kennen, da Sie sonst riskieren, sie in der resultierenden Navigation zu verlieren.
Beachten Sie, dass das obige Beispiel zwar für gilt
push()
, dies jedoch auch funktioniertreplace()
.Getestet mit vue-router 3.1.6.
quelle
Für das Hinzufügen mehrerer Abfrageparameter hat dies bei mir funktioniert (von hier aus https://forum.vuejs.org/t/vue-router-programmatisch-append-to-querystring/3655/5 ).
quelle
Um mehrere Abfrageparameter gleichzeitig festzulegen / zu entfernen, habe ich im Rahmen meiner globalen Mixins (
this
Punkte zur Vue-Komponente) die folgenden Methoden verwendet :quelle
Normalerweise verwende ich dafür das Verlaufsobjekt. Die Seite wird auch nicht neu geladen.
Beispiel:
quelle
Hier ist meine einfache Lösung, um die Abfrageparameter in der URL zu aktualisieren, ohne die Seite zu aktualisieren. Stellen Sie sicher, dass es für Ihren Anwendungsfall funktioniert.
quelle