Mari kita bincangkan tentang cara memuat semula halaman semasa dalam vue3

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue3. Ia juga akan membincangkan tentang cara memuat semula halaman semasa dalam vue3. Rakan-rakan yang berminat boleh lihat di bawah.

1. Senario perniagaan

Secara amnya, apabila kami memadam atau mengedit data jadual, kami akan meminta antara muka sekali lagi untuk memuat semula data jadual. Jika terdapat beberapa antara muka yang perlu diminta pada masa yang sama, maka anda tidak boleh melaraskan setiap antara muka satu demi satu. Kita perlu menggunakan cara yang lebih mesra untuk mencapainya.

2. Idea pelaksanaan

Cara pertama dan paling intuitif adalah dengan menyegarkan halaman semasa secara langsung, seperti menggunakan location.reload和$router.go(0)方法. Walau bagaimanapun, kaedah ini akan menyebabkan halaman mempunyai skrin putih, yang tidak mesra. Jadi bolehkah kita memuat semula komponen vue semasa? Kami tahu bahawa apabila komponen Vue dipaparkan semula, keseluruhan kitaran hayatnya akan dilaksanakan semula dan antara muka secara semula jadi akan diminta semula. Jadi bagaimana untuk menyegarkan semula komponen semasa? Yang pertama ialah mengawal pemaparan komponen halaman semasa melalui v-if. Dalam kes router-view komponen pemaparan, kami terus menambah v-if di atas router-view. Kemudian dengan mengawal syarat penghakiman ini, sebagai contoh, kami memanggilnya isRouterAlive.

Jadi bagaimana untuk mengawal keadaan penghakiman ini? Oleh kerana komunikasi merentas komponen terlibat, provide/inject perlu digunakan. Sediakan kaedah muat semula melalui router-view dalam komponen provide Selepas memadam atau mengedit data jadual, gunakan inject untuk mencetuskan kaedah muat semula. Dalam kaedah tambah nilai kami mengawal syarat penghakiman. Apabila realod ialah isRouterAlive=false, kemudian tetapkannya kepada nextTick dalam true, supaya komponen boleh dimuatkan semula.

Mari kita lihat pelaksanaan logik kod.

3. Pelaksanaan kod

Mula-mula ubah suai router-view komponen pemaparan

<template>
  <div class="main">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
	export default {
    provide(){
        return {
            reload: this.reload
        }
    },
    data(){
        return {
            isRouterAlive: true
        }
    },
    methods: {
        reload(){
            this.isRouterAlive = false
            //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件
            this.$nextTick(() => {
              this.isRouterAlive = true  
            })
        }
    }
  }
</script>

pada halaman jadual, laksanakannya seperti ini:

<template>
  <div>
    首页
    <button @click="handleSubmit">刷新</button>
  </div>
</template>

<script>
export default {
  //通过inject获取祖先元素的reload方法
  inject: [&#39;reload&#39;],
  data() {
    return {
      isRouterAlive: true,
    }
  },
  methods: {
    handleSubmit() {
      // 假如这是一个编辑提交事件
      // 这里是编辑请求的各种逻辑和接口...
      // 编辑执行成功，就刷新当前页面，请求reload
      this.reload()
    },
  },
}
</script>

Dengan melakukan ini Dengan cara ini, halaman tidak akan kosong, bar alamat tidak akan ditukar dengan cepat, dan pengalaman pengguna sangat mesra.

Pembelajaran yang disyorkan: "tutorial video vue"

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara memuat semula halaman semasa dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!