Berikut contohnya di dokumen:
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
Ref: https://router.vuejs.org/en/essentials/navigation.html
Seperti yang disebutkan dalam dokumen tersebut, router.replace
berfungsi sepertirouter.push
Jadi, Anda tampaknya sudah benar di kode sampel yang dipermasalahkan. Tapi saya pikir Anda mungkin perlu memasukkan parameter name
atau path
juga, sehingga router memiliki beberapa rute untuk dinavigasi. Tanpa name
atau path
, itu tidak terlihat sangat berarti.
Inilah pemahaman saya saat ini:
query
bersifat opsional untuk router - beberapa info tambahan bagi komponen untuk membuat tampilan
name
atau path
wajib - ini memutuskan komponen apa yang akan ditampilkan di <router-view>
.
Itu mungkin hal yang hilang dalam kode sampel Anda.
EDIT: Detail tambahan setelah komentar
Sudahkah Anda mencoba menggunakan rute bernama dalam kasus ini? Anda memiliki rute dinamis, dan lebih mudah untuk menyediakan parameter dan kueri secara terpisah:
routes: [
{ name: 'user-view', path: '/user/:id', component: UserView },
// other routes
]
dan kemudian dalam metode Anda:
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })
Secara teknis tidak ada perbedaan antara di atas dan this.$router.replace({path: "/user/123", query:{q1: "q1"}})
, tetapi lebih mudah untuk menyediakan parameter dinamis pada rute bernama daripada membuat string rute. Tetapi dalam kedua kasus, parameter kueri harus diperhitungkan. Dalam kedua kasus tersebut, saya tidak dapat menemukan sesuatu yang salah dengan cara penanganan parameter kueri.
Setelah Anda berada di dalam rute, Anda dapat mengambil parameter dinamis sebagai this.$route.params.id
dan parameter kueri Anda sebagai this.$route.query.q1
.
Tanpa memuat ulang halaman atau menyegarkan dom,
history.pushState
dapat melakukan pekerjaan itu.Tambahkan metode ini di komponen Anda atau di tempat lain untuk melakukannya:
Jadi di mana pun di komponen Anda, panggil
addParamsToLocation({foo: 'bar'})
untuk mendorong lokasi saat ini dengan parameter kueri di tumpukan window.history.Untuk menambahkan parameter kueri ke lokasi saat ini tanpa mendorong entri riwayat baru , gunakan
history.replaceState
sebagai gantinya.Diuji dengan Vue 2.6.10 dan Nuxt 2.8.1.
Hati-hati dengan metode ini!
Vue Router tidak tahu bahwa url telah berubah, jadi tidak mencerminkan url setelah pushState.
sumber
Sebenarnya Anda bisa mendorong kueri seperti ini:
this.$router.push({query: {plan: 'private'}})
Berdasarkan: https://github.com/vuejs/vue-router/issues/1631
sumber
sumber
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'},) })
Jika Anda mencoba menyimpan beberapa parameter, saat mengubah yang lain, pastikan untuk menyalin status kueri vue router dan tidak menggunakannya kembali.
Ini berfungsi, karena Anda membuat salinan yang tidak direferensikan:
sementara di bawah ini akan menyebabkan Vue Router mengira Anda menggunakan kembali kueri yang sama dan menyebabkan
NavigationDuplicated
kesalahan:Tentu saja, Anda dapat menguraikan objek kueri, seperti berikut, tetapi Anda harus mengetahui semua parameter kueri ke halaman Anda, jika tidak, Anda berisiko kehilangannya di navigasi yang dihasilkan.
Perhatikan, meskipun contoh di atas adalah untuk
push()
, ini juga berfungsireplace()
.Diuji dengan vue-router 3.1.6.
sumber
Untuk menambahkan beberapa parameter kueri, inilah yang berhasil untuk saya (dari sini https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5 ).
sumber
Untuk mengatur / menghapus beberapa parameter kueri sekaligus, saya telah berakhir dengan metode di bawah ini sebagai bagian dari mixin global saya (
this
menunjuk ke komponen vue):sumber
Saya biasanya menggunakan objek sejarah untuk ini. Itu juga tidak memuat ulang halaman.
Contoh:
sumber
Inilah solusi sederhana saya untuk memperbarui parameter kueri di URL tanpa menyegarkan halaman. Pastikan itu berfungsi untuk kasus penggunaan Anda.
sumber