เรามี router.reload ใน vue-router หรือไม่?

ฉันเห็นในคำขอดึงนี้:

• เพิ่ม router.reload()

  โหลดซ้ำด้วยเส้นทางปัจจุบันและเรียก data hook อีกครั้ง

แต่เมื่อฉันลองออกคำสั่งต่อไปนี้จากส่วนประกอบ Vue:

this.$router.reload()

ฉันได้รับข้อผิดพลาดนี้:

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

ฉันค้นหาในเอกสารแต่ไม่พบสิ่งที่เกี่ยวข้อง vue / vue-router ให้บริการบางอย่างเช่นนี้หรือไม่?

เวอร์ชันซอฟต์แวร์ที่ฉันสนใจ ได้แก่ :

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

ปล. ฉันรู้ว่าlocation.reload()เป็นทางเลือกหนึ่ง แต่ฉันกำลังมองหาตัวเลือก Vue ดั้งเดิม

this.$router.go()ไม่ว่าสิ่งนี้; หากไม่ได้ระบุอาร์กิวเมนต์เราเตอร์จะนำทางไปยังตำแหน่งปัจจุบันรีเฟรชเพจ

_{หมายเหตุ: ปัจจุบันการดำเนินงานของเราเตอร์และส่วนประกอบประวัติศาสตร์ไม่ได้ทำเครื่องหมายพระรามเป็นตัวเลือก แต่ IMVHO มันเป็นทั้งข้อผิดพลาดหรือละเลยในส่วนของอีวานคุณของเนื่องจากข้อมูลจำเพาะชัดเจนให้มัน ฉันได้ยื่นรายงานปัญหาเกี่ยวกับเรื่องนี้แล้ว หากคุณกังวลจริงๆเกี่ยวกับคำอธิบายประกอบ TS ในปัจจุบันให้ใช้สิ่งที่เทียบเท่าthis.$router.go(0)}

เกี่ยวกับ 'เหตุใดจึงเป็นเช่นนั้น': goส่งผ่านอาร์กิวเมนต์ไปwindow.history.goภายในดังนั้นจึงเท่ากับwindows.history.go()- ซึ่งในทางกลับกันจะโหลดหน้าซ้ำตามเอกสาร MDN

_{หมายเหตุ: เนื่องจากการดำเนินการนี้เป็นการรีโหลดแบบ "ซอฟต์" บนเดสก์ท็อปปกติ (ไม่ใช่แบบพกพา) Firefox อาจมีสิ่งแปลก ๆ มากมายปรากฏขึ้นหากคุณใช้งาน แต่ในความเป็นจริงแล้วคุณต้องการการรีโหลดจริง การใช้window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) ที่ OP กล่าวถึงแทนอาจช่วยได้ - มันช่วยแก้ปัญหาของฉันใน FF ได้อย่างแน่นอน}

วิธีแก้ไขที่ง่ายที่สุดคือเพิ่ม a: key attribute ให้กับ:

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

เนื่องจาก Vue Router ไม่สังเกตเห็นการเปลี่ยนแปลงใด ๆ หากมีการแก้ไขส่วนประกอบเดียวกัน เมื่อใช้คีย์การเปลี่ยนแปลงเส้นทางใด ๆ จะทริกเกอร์การโหลดองค์ประกอบซ้ำด้วยข้อมูลใหม่

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

เอกสาร Vue-Router:

ฉันตรวจสอบ vue-router repo บน GitHub และดูเหมือนว่าจะไม่มีreload()วิธีการอีกต่อไป แต่ในไฟล์เดียวกันมี: currentRouteobject

ที่มา: vue-router / src / index.js
เอกสาร: docs

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

ตอนนี้คุณสามารถใช้this.$router.go(this.$router.currentRoute)สำหรับรีโหลดเส้นทางปัจจุบัน

ง่ายตัวอย่างเช่น

เวอร์ชันสำหรับคำตอบนี้:

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

ใช้router.go(0)ถ้าคุณใช้ typescript และจะถามอาร์กิวเมนต์สำหรับวิธี go

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

เป็นการโหลดซ้ำของฉัน เนื่องจากเบราว์เซอร์บางตัวแปลกมาก location.reloadไม่สามารถโหลดซ้ำได้

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

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

แก้ไขเส้นทางไปยัง URL และไปที่หน้าต่างด้วย 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)

วิธีนี้จะแทนที่ URL และทำให้เพจทำการร้องขอแบบเต็ม (รีเฟรช) แทนที่จะใช้ Vue.router $ router.go ใช้งานไม่ได้เหมือนกันสำหรับฉันแม้ว่าในทางทฤษฎีควรจะเป็น

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

ฉันได้ลองโหลดหน้าปัจจุบันซ้ำแล้ว

vueObject.$forceUpdate();

ทำไมคุณไม่ใช้เมธอด 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)

หมายเหตุ:

1. และ#ต้องมีค่าหลังจากนั้น
2. แฮชเส้นทางที่สองคือช่องว่างไม่ใช่สตริงว่าง
3. setTimeoutไม่ใช่$nextTickเพื่อรักษาความสะอาด url

สำหรับการแสดงผลคุณสามารถใช้ในองค์ประกอบหลัก

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