Apakah kita memiliki router.reload di vue-router?

94

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.

Saurabh
sumber

Jawaban:

138

this.$router.go()melakukan persis ini; jika tidak ada argumen yang ditentukan, router menavigasi ke lokasi saat ini, menyegarkan halaman.

catatan: implementasi saat ini dari router dan komponen sejarahnya tidak menandai param sebagai opsional, tetapi IMVHO itu adalah bug atau kelalaian pada bagian Evan You, karena spesifikasi secara eksplisit mengizinkannya . Saya telah mengajukan laporan masalah tentang itu. Jika Anda benar-benar khawatir dengan anotasi TS saat ini, gunakan saja yang setarathis.$router.go(0)

Mengenai 'why is so': secara gointernal meneruskan argumennya ke window.history.go, jadi sama dengan windows.history.go()- yang, pada gilirannya, memuat ulang halaman, sesuai dokumen MDN .

catatan: karena ini menjalankan "soft reload" pada desktop biasa (non-portabel) Firefox, sekelompok kebiasaan aneh mungkin muncul jika Anda menggunakannya tetapi sebenarnya Anda memerlukan reload yang benar; menggunakan window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) yang disebutkan oleh OP sebagai gantinya dapat membantu - itu pasti menyelesaikan masalah saya di FF.


sumber
4
Ya, itu melakukan penyegaran halaman dan bukan pemuatan ulang komponen.
EscapeNetscape
<span @click = "() => {ini. $ router.go ()}" class = "btn btn-lg
btn-hazard
6
Perhatikan bahwa $router.go()menerima satu parameter, jadi Anda harus menggunakannya sebagai $router.go(0), yang berarti menavigasi halaman nol kembali dalam sejarah
Dan
1
@Dan FWIW, menurut saya fakta bahwa github.com/vuejs/vue-router/blob/dev/src/index.js#L175 & implementasinya (mis. Github.com/vuejs/vue-router/blob/ dev / src / history / html5.js # L40 ) jangan menandai param sebagai opsional apakah bug atau kelalaian pada bagian Evan You, karena spesifikasi secara eksplisit mengizinkannya (lihat developer.mozilla.org/en-US/ docs / Web / API / History / go # Parameter ). Saya telah mengajukan laporan bug tentangnya @ github.com/vuejs/vue-router/issues/3065 .
window.location.reload(forceReload)sepertinya tidak digunakan lagi, tapi window.location.reload()tidak apa-apa.
henon
42

Solusi paling sederhana adalah dengan menambahkan: key atribut ke:

<router-view :key="$route.fullPath"></router-view>

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.

Ian Pinto
sumber
1
vuejs.org/v2/api/#key di dokumen resmi secara tidak langsung menjelaskan mekanisme atribut khusus kunci di vue.
Ian Pinto
1
Ini tidak akan berhasil, karena dalam skenario OP membahas jalur lengkap tidak akan berubah.
Nick Coad
27
this.$router.go(this.$router.currentRoute)

Dokumen Vue-Router:

Saya memeriksa repo vue-router di GitHub dan tampaknya tidak ada reload()metode lagi. Tapi di file yang sama, ada: currentRouteobject.

Sumber: vue-router / src / index.js
Docs: docs

get currentRoute (): ?Route {
    return this.history && this.history.current
  }

Sekarang Anda dapat menggunakan this.$router.go(this.$router.currentRoute)untuk memuat ulang rute saat ini.

Contoh sederhana .

Versi untuk jawaban ini:

"vue": "^2.1.0",
"vue-router": "^2.1.1"
t_dom93
sumber
1
Ini tidak akan menyegarkan data apa pun padaSafari
jilen
7
Adakah cara untuk memuat ulang komponen, tanpa menyegarkan halaman? Rutenya harus sama, katakanlah '/ users'. Tetapi ketika saya mengklik tombol segarkan, itu harus menyegarkan seluruh halaman, tanpa memuat ulang halaman.
Rajeshwar
6

Gunakan router.go(0)jika Anda menggunakan Ketikan, dan ini menanyakan argumen untuk metode pergi.

StvnSpnz
sumber
4

router.js

routes: [
{
  path: '/',
  component: test,
  meta: {
    reload: true,
  },
}]

main.js

import router from './router';

new Vue({
  render: h => h(App),
  router,
  watch:{
    '$route' (to) {
       if(to.currentRoute.meta.reload==true){window.location.reload()}
   }
 }).$mount('#app')
Alfarouq
sumber
2

Ini isi ulang saya. Karena beberapa browser sangat aneh. location.reloadtidak bisa memuat ulang.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}
<router-view v-if="isRouterAlive"/>
LiHao
sumber
1

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.

Untuk Nama
sumber
1
`<router-link :to='`/products`' @click.native="$router.go()" class="sub-link"></router-link>`

Saya telah mencoba ini untuk memuat ulang halaman ini.

Tawaran
sumber
0
vueObject.$forceUpdate();

mengapa Anda tidak menggunakan metode forceUpdate?

Alireza Mortezaei
sumber
-1
function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                          + window.location.search);
}


App.$router.replace({name:"my-route", hash: '#update'})
App.$router.replace({name:"my-route", hash: ' ', params: {a: 100} })
setTimeout(removeHash, 0)

Catatan:

  1. Dan #harus memiliki nilai setelahnya.
  2. Hash rute kedua adalah spasi, bukan string kosong.
  3. setTimeout, bukan $nextTickuntuk menjaga kebersihan url.
Justin Alexander
sumber
-2

Untuk rerender Anda bisa menggunakan komponen induk

<template>
  <div v-if="renderComponent">content</div>
</template>
<script>
export default {
   data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
}
</script>
Богдан Чернявський
sumber