Bagaimana untuk memuat semula halaman dalam aplikasi Vue

Vue ialah rangka kerja JavaScript yang popular dan alat pembangunan untuk membina aplikasi web interaktif. Vue menyediakan banyak ciri dan alatan yang berguna, termasuk Penghala Vue. Vue Router ialah pengurus penghalaan terbina dalam yang membantu pembangun mengurus penghalaan dengan lebih baik dalam aplikasi Vue. Walaupun Vue Router ialah alat yang sangat berkuasa dan mudah, Vue Router tidak akan bertindak balas apabila halaman semasa perlu dimuat semula. Dalam artikel ini, kami akan menerangkan cara memuat semula halaman dalam aplikasi Vue.

Penghala Vue

Sebelum mula memperkenalkan cara memuat semula halaman, anda perlu memahami Penghala Vue terlebih dahulu. Penghala Vue ialah alat pengurusan penghalaan yang disediakan secara rasmi oleh Vue.js, yang boleh mengurus penghalaan dengan mudah dalam aplikasi Vue. Menggunakan Penghala Vue, pembangun boleh mentakrifkan satu set peraturan penghalaan dan memetakannya kepada komponen. Apabila pengguna mengakses laluan ini, Penghala Vue akan menguruskan penukaran kepada komponen yang betul dalam aplikasi Vue. Penghala Vue juga boleh menyediakan banyak ciri lain, seperti sarang laluan dan pengawal laluan.

Untuk menggunakan Penghala Vue, anda perlu memasangnya melalui npm terlebih dahulu. Masukkan arahan berikut dalam terminal:

npm install vue-router --save

Selepas pemasangan selesai, perkenalkan dan gunakan Penghala Vue dalam fail kemasukan aplikasi Vue. Contohnya:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 定义路由规则
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Di sini, kami mengkonfigurasi Penghala Vue dan mengikatnya pada tika Vue. Kini, kita boleh menggunakan teg <router-link> dalam komponen Vue untuk menentukan pautan dan teg <router-view> untuk memaparkan komponen ini.

Muat semula halaman

Vue ialah aplikasi halaman tunggal (SPA) dan semua laluannya dimuatkan dan ditukar dalam halaman yang sama. Dalam kes ini, Vue akan menjadi tidak bertindak balas apabila pengguna mengklik butang muat semula penyemak imbas, atau memasukkan URL secara manual dan menekan kekunci Enter.

Untuk menyelesaikan masalah ini, kami boleh menggunakan objek location JavaScript untuk memuat semula halaman. Dalam Laluan Vue, kita boleh menggunakan kaedah $router.go(0) untuk memuat semula halaman semasa. Kaedah ini akan mengembalikan Vue Router ke laluan semasa, dengan itu memaparkan semula halaman.

methods: {
  refreshPage() {
    this.$router.go(0)
  }
}

Di sini, kami mentakrifkan kaedah refreshPage, yang dipanggil untuk menyegarkan halaman apabila pengguna mengklik butang. Apabila kaedah ini dipanggil, Penghala Vue akan memuatkan semula komponen pada laluan semasa, dengan itu memaparkan semula halaman.

Ringkasan

Vue Router ialah modul yang sangat penting dalam Vue.js, yang boleh membantu pembangun mengurus penghalaan dengan lebih baik dalam aplikasi Vue. Walaupun Vue Router ialah alat yang sangat berkuasa dan mudah, Vue Router akan menjadi tidak bertindak balas apabila halaman semasa perlu dimuat semula. Tetapi dengan menggunakan objek location JavaScript dan menggunakan kaedah $router.go(0) untuk memuat semula halaman semasa, kami boleh menyelesaikan masalah ini.

Saya harap artikel ini dapat membantu anda lebih memahami penggunaan Vue Router Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej di ruangan komen.

Atas ialah kandungan terperinci Bagaimana untuk memuat semula halaman dalam aplikasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!