Biar saya terangkan secara terperinci cara melaksanakan muat semula halaman penuh atau separa dalam Vue

Bagaimana untuk memuat semula halaman dalam vue? Artikel berikut akan memperkenalkan kepada anda cara melaksanakan penyegaran halaman penuh dan penyegaran separa dalam Vue. Saya harap ia akan membantu anda!

1. Muat semula halaman penuh

1 Ubah suai App.vue, kodnya adalah seperti berikut:

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;,
  provide() { // 父组件中返回要传给下级的数据
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

Kuncinya. mata adalah seperti yang ditunjukkan dalam rajah di bawah :

2 Pergi ke halaman yang perlu dimuat semula dan gunakan suntikan untuk mengimport dan rujukan semula:

3 Apabila diperlukan Panggil this.reload() dalam kaedah panggilan

2. Segar semula separa

1. . Tentukan pembolehubah isReloadData dan ikatkannya kepada Tetapkan pada teg yang perlu dimuat semula:

2. Tentukan kaedah muat semula separa muat semulaBahagian:

3. Panggil dalam kaedah yang perlu melakukan penyegaran separa

3 >

Apabila berada dalam halaman Jika sesetengah data diubah suai secara dinamik, atau data dibawa oleh prop, atau sifat ditetapkan secara dinamik melalui fungsi, data terkini mungkin tidak dipaparkan selepas pengubahsuaian.
• Apabila data halaman berubah, akan terdapat pepijat dalam pemaparan halaman Contohnya, selepas data komponen el-table berubah, kawasan kosong akan muncul.

Pada masa ini, muat semula halaman penuh atau muat semula separa akan berguna.

1. Pilih semua secara lalai, halaman dipaparkan seperti biasa:

2. Semak satu lajur paparan, halaman dipaparkan seperti biasa:

3 Semak lajur paparan yang tidak ditandai sekali lagi, dan kawasan kosong akan muncul:

Pada masa ini, anda hanya perlu menghubungi ia dalam kaedah pemilihan radio Kaedah penyegaran separa this.reloadPart() boleh menyelesaikan masalah yang sama berlaku untuk pemilihan penuh.

4 Setiap kali lajur paparan baharu ditambahkan, kawasan kosong akan muncul dalam jadual Pada masa ini, kita hanya perlu memanggil kaedah muat semula halaman penuh ini.reload() selepas rekod baharu itu berjaya ditambah.

[Cadangan berkaitan: "

tutorial vue.js"]

Atas ialah kandungan terperinci Biar saya terangkan secara terperinci cara melaksanakan muat semula halaman penuh atau separa dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!