Apakah kita memiliki router.reload di vue-router?

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.

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.}

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.

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"

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

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')

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"/>

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.

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

Saya telah mencoba ini untuk memuat ulang halaman ini.

vueObject.$forceUpdate();

mengapa Anda tidak menggunakan metode forceUpdate?

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.

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>