Vue-router'da router.reload var mı?

Bu çekme talebinde görüyorum :

• Ekle router.reload()

  Mevcut yolla yeniden yükleyin ve veri kancasını tekrar çağırın

Ama bir Vue bileşeninden aşağıdaki komutu vermeyi denediğimde:

this.$router.reload()

Bu hatayı alıyorum:

Uncaught TypeError: this.$router.reload is not a function

Dokümanlarda aradım , ancak alakalı hiçbir şey bulamadım. Vue / vue-router sağlayıcısı bunun gibi bazı işlevler mi?

İlgilendiğim yazılım sürümleri:

"vue": "^2.1.0",
"vue-router": "^2.0.3",

PS. location.reload()Alternatiflerden biri olduğunu biliyorum , ancak yerel bir Vue seçeneği arıyorum.

this.$router.go()tam olarak bunu yapar; hiçbir bağımsız değişken belirtilmezse, yönlendirici sayfayı yenileyerek geçerli konuma gider.

_{not: yönlendiricinin ve geçmiş bileşenlerinin mevcut uygulaması , parametreyi isteğe bağlı olarak işaretlemez, ancak IMVHO, özellik açıkça izin verdiği için Evan You'da bir hata veya eksikliktir . Bununla ilgili bir sorun raporu verdim. Mevcut TS ek açıklamalarıyla gerçekten ilgileniyorsanız, eşdeğerini kullanınthis.$router.go(0)}

'Neden böyle' ile ilgili olarak: gokendi argümanlarını dahili olarak iletir window.history.go, bu nedenle eşittir windows.history.go()- bu da MDN belgesine göre sayfayı yeniden yükler .

_{not: bu, normal masaüstü (taşınabilir olmayan) Firefox'ta "yumuşak" bir yeniden yükleme gerçekleştirdiğinden, onu kullanırsanız bir dizi garip tuhaflık görünebilir, ancak aslında gerçek bir yeniden yüklemeye ihtiyacınız vardır; kullanarak window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) yerine mayıs yardım OP bahsettiği - kesinlikle FF benim sorunları çözmek yaptı.}

En basit çözüm, aşağıdakilere a: key özelliği eklemektir:

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

Bunun nedeni, aynı bileşen adresleniyorsa Vue Router herhangi bir değişiklik fark etmemesidir. Anahtarla, yoldaki herhangi bir değişiklik, bileşenin yeni verilerle yeniden yüklenmesini tetikleyecektir.

this.$router.go(this.$router.currentRoute)

Vue-Router Belgeleri:

GitHub'da vue-yönlendirici deposunu kontrol ettim ve artık bir reload()yöntem yok gibi görünüyor . Ama aynı dosyada: currentRoutenesne var.

Kaynak: vue-router / src / index.js
Dokümanlar: docs

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

Şimdi this.$router.go(this.$router.currentRoute)mevcut rotayı yeniden yüklemek için kullanabilirsiniz .

Basit bir örnek .

Bu cevabın versiyonu:

"vue": "^2.1.0",
"vue-router": "^2.1.1"

Kullanım router.go(0)sen typescript kullanırsanız ve go yöntemi için argümanlar soruyor.

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

Bu benim yeniden doldurmam. Bazı tarayıcılar yüzünden çok tuhaf. location.reloadyeniden yüklenemiyor.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}

<router-view v-if="isRouterAlive"/>

Bir URL'ye giden yolu çözün ve Javascript ile pencerede gezinin.

        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)

Bu yöntem URL'nin yerini alır ve sayfanın Vue.router'a güvenmek yerine tam bir istek (yenileme) yapmasına neden olur. $ router.go, teorik olarak olması gerekse de benim için aynı şekilde çalışmıyor.

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

Bunu mevcut sayfayı yeniden yüklemek için denedim.

vueObject.$forceUpdate();

neden forceUpdate yöntemini kullanmıyorsunuz?

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)

Notlar:

1. Ve #ondan sonra bir değeri olmalı.
2. İkinci yol karması bir boşluktur, boş dize değil.
3. setTimeout, $nextTickurl'yi temiz tutmak için değil .

Yeniden oluşturmak için üst bileşende kullanabilirsiniz

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