vue laluan yang sama melompat terpaksa menyegarkan semula

Vue ialah rangka kerja JavaScript yang sangat popular untuk membangunkan aplikasi satu halaman (SPA). Penghala Vue amat diperlukan apabila membangunkan aplikasi satu halaman. Penghala Vue ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js, membolehkan pembangun mentakrifkan laluan, pandangan dan gelagat dengan mudah untuk mengendalikan permintaan navigasi.

Vue Router tidak memuatkan semula kandungan halaman secara lalai apabila melompat antara laluan yang sama, tetapi membaca kandungan yang dimuatkan sebelum ini daripada cache. Walaupun kaedah ini boleh meningkatkan prestasi, dalam beberapa kes, pembangun perlu memaksa muat semula halaman, seperti apabila data terkini perlu dipaparkan serta-merta selepas kandungan halaman dikemas kini.

Artikel ini akan memperkenalkan cara memuat semula secara paksa laluan yang sama dalam Vue.

Penerangan Masalah

Dalam Penghala Vue, jika kita melompat antara laluan yang sama, Vue tidak akan memaparkan semula komponen, yang bermaksud fungsi cangkuk kitaran hayat komponen tidak akan Dicetuskan lagi. Ini bermakna jika kita mahu data dalam komponen kekal selari dengan bahagian belakang, kita perlu menambah logik kemas kini secara manual.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

Dalam contoh ini, kami memanggil fungsi updateData secara manual untuk mengemas kini data mesej bagi memastikan ia disegerakkan dengan bahagian belakang. Walaupun pendekatan ini boleh menyelesaikan masalah, memanggil fungsi kemas kini secara manual setiap kali lompatan dibuat boleh menjadi menyusahkan, terutamanya apabila aplikasi menjadi lebih kompleks.

Penyelesaian

Vue Router mempunyai pembolehubah global terbina dalam bernama $route, yang mengandungi maklumat penghalaan semasa. Kita boleh mengesan perubahan laluan dengan menjejaki $route dan memaksa komponen untuk dimuat semula apabila laluan berubah.

Kami boleh mendaftarkan pendengar $route dalam fungsi cangkuk kitaran hayat yang dibuat atau dipasang komponen, dan kemudian memaksa muat semula halaman apabila $route berubah.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
    this.$router.afterEach((to, from) => {
      if (to.path === from.path) {
        this.$nextTick(() => {
          location.reload()
        })
      }
    })
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

Dalam contoh ini, kami mendaftarkan pendengar $route dalam cangkuk kitaran hayat yang dipasang dan memaksa muat semula halaman apabila perubahan laluan dikesan. Kami menggunakan to.path dan from.path untuk membandingkan sama ada laluan semasa adalah sama dengan laluan sebelumnya. Jika ia adalah sama, ia boleh ditentukan bahawa pengguna sedang memuat semula laluan semasa Pada masa ini, kami boleh memaksa halaman untuk dimuat semula melalui fungsi location.reload().

Perlu diambil perhatian bahawa kami menggunakan fungsi $nextTick() Vue sebelum memuat semula halaman secara paksa. Fungsi ini boleh menangguhkan fungsi panggil balik sehingga selepas DOM dikemas kini untuk memastikan data telah dikemas kini sepenuhnya. Jika anda tidak menggunakan fungsi $nextTick() tetapi secara langsung memaksa muat semula halaman, ia boleh menyebabkan pemaparan halaman tidak lengkap atau kemas kini data tertangguh.

Ringkasan

Apabila membangunkan aplikasi satu halaman Vue, kita selalunya perlu melompat antara laluan yang sama. Secara lalai, Vue tidak memaparkan semula komponen, yang boleh menyebabkan kandungan halaman menjadi tidak segerak dengan data bahagian belakang. Dengan memantau perubahan $route dalam Vue Router, kami boleh mengesan lompatan antara laluan yang sama dan memaksa halaman untuk memuat semula apabila melompat, dengan itu menyelesaikan masalah data yang tidak segerak.

Atas ialah kandungan terperinci vue laluan yang sama melompat terpaksa menyegarkan semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!