Saya melihat dalam permintaan tarik ini :
Tambah sebuah
router.reload()
Muat ulang dengan jalur saat ini dan panggil hook data lagi
Tetapi ketika saya mencoba mengeluarkan perintah berikut dari komponen Vue:
this.$router.reload()
Saya mendapatkan kesalahan ini:
Uncaught TypeError: this.$router.reload is not a function
Saya mencari di dokumen , tetapi tidak menemukan sesuatu yang relevan. Apakah vue / vue-router menyediakan beberapa fungsi seperti ini?
Versi perangkat lunak yang saya minati adalah:
"vue": "^2.1.0",
"vue-router": "^2.0.3",
PS. Saya tahu location.reload()
ini salah satu alternatif, tetapi saya mencari opsi Vue asli.
sumber
$router.go()
menerima satu parameter, jadi Anda harus menggunakannya sebagai$router.go(0)
, yang berarti menavigasi halaman nol kembali dalam sejarahwindow.location.reload(forceReload)
sepertinya tidak digunakan lagi, tapiwindow.location.reload()
tidak apa-apa.Solusi paling sederhana adalah dengan menambahkan: key atribut ke:
Ini karena Vue Router tidak melihat adanya perubahan jika komponen yang sama sedang ditangani. Dengan kuncinya, setiap perubahan pada jalur akan memicu pemuatan ulang komponen dengan data baru.
sumber
Dokumen Vue-Router:
Saya memeriksa repo vue-router di GitHub dan tampaknya tidak ada
reload()
metode lagi. Tapi di file yang sama, ada:currentRoute
object.Sumber: vue-router / src / index.js
Docs: docs
Sekarang Anda dapat menggunakan
this.$router.go(this.$router.currentRoute)
untuk memuat ulang rute saat ini.Contoh sederhana .
Versi untuk jawaban ini:
sumber
Safari
Gunakan
router.go(0)
jika Anda menggunakan Ketikan, dan ini menanyakan argumen untuk metode pergi.sumber
router.js
main.js
sumber
Ini isi ulang saya. Karena beberapa browser sangat aneh.
location.reload
tidak bisa memuat ulang.sumber
Selesaikan rute ke URL dan navigasikan jendela dengan Javascript.
let r = this.$router.resolve({ name: this.$route.name, // put your route information in params: this.$route.params, // put your route information in query: this.$route.query // put your route information in }); window.location.assign(r.href)
Metode ini menggantikan URL dan menyebabkan halaman melakukan permintaan penuh (refresh) daripada mengandalkan Vue.router. $ router.go tidak berfungsi sama untuk saya meskipun secara teoritis seharusnya.
sumber
Saya telah mencoba ini untuk memuat ulang halaman ini.
sumber
mengapa Anda tidak menggunakan metode forceUpdate?
sumber
Catatan:
#
harus memiliki nilai setelahnya.setTimeout
, bukan$nextTick
untuk menjaga kebersihan url.sumber
Untuk rerender Anda bisa menggunakan komponen induk
sumber