Bagaimana untuk menggunakan penghalaan untuk berkongsi data antara halaman dalam Vue?

Bagaimana untuk menggunakan penghalaan untuk berkongsi data antara halaman dalam Vue?

Dalam rangka kerja Vue, adalah keperluan yang sangat biasa untuk menggunakan penghalaan untuk berkongsi data antara halaman. Melalui penghalaan, kami boleh memindahkan data antara halaman yang berbeza, membolehkan data dikongsi antara halaman, meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Untuk mencapai perkongsian data antara halaman, kami perlu memasang Vue Router dan memperkenalkannya ke dalam projek terlebih dahulu. Memasang Penghala Vue boleh dilakukan dengan arahan berikut:

npm install vue-router --save

Kemudian, perkenalkan Penghala Vue dalam fail kemasukan projek (biasanya fail utama.js):

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

Vue.use(VueRouter)

Seterusnya, kita perlu mengkonfigurasi penghalaan dalam contoh Vue. Dalam konfigurasi penghalaan, kita perlu menentukan peraturan penghalaan, iaitu komponen dan laluan yang sepadan dengan setiap laluan. Kami juga boleh menentukan beberapa data kongsi global dalam konfigurasi penghalaan supaya ia boleh diakses dan dikongsi dalam halaman yang berbeza.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  routes
})

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

Dalam kod di atas, kami menentukan dua laluan: Rumah dan Perihal masing-masing sepadan dengan dua komponen. Dalam contoh Vue, kami mentakrifkan data kongsi sharedData, yang boleh diakses dan dikongsi dalam halaman yang berbeza.

Seterusnya, bagaimana untuk menggunakan data kongsi ini dalam komponen? Kami boleh mengakses dan mengubah suai data yang dikongsi ini melalui objek $route. Objek penghalaan $route mengandungi maklumat penghalaan semasa, termasuk laluan penghalaan, parameter, dsb.

Dalam komponen, kita boleh mengakses objek $route melalui ini.$route. Contohnya, dalam komponen Home, kita boleh mengakses dan mengubah suai data kongsi dengan cara berikut:

export default {
  mounted() {
    console.log(this.$route.sharedData) // 输出'Hello World'
  
    this.$route.sharedData = 'New Data'
    console.log(this.$route.sharedData) // 输出'New Data'
  }
}

Melalui kod di atas, kita dapat melihat bahawa mengakses dan mengubah suai data kongsi dalam komponen Home adalah sangat mudah. Kita hanya perlu mengakses dan mengubah suai melalui ini.$route.sharedData.

Begitu juga, data yang dikongsi juga boleh diakses dan diubah suai dalam komponen Perihal melalui ini.$route.sharedData. Dengan cara ini, data boleh dikongsi dan dipindahkan antara komponen yang berbeza.

Perlu diambil perhatian bahawa perkongsian objek $route hanya sah dalam contoh penghalaan yang sama. Dalam erti kata lain, jika kita mengakses $route.sharedData dalam keadaan penghalaan yang berbeza, perkongsian data tidak boleh dicapai.

Untuk meringkaskan, perkongsian data antara halaman boleh dicapai dengan mudah melalui penghalaan. Dengan mentakrifkan data kongsi dalam konfigurasi penghalaan, komponen boleh mencapai pemindahan dan perkongsian data dengan mengakses dan mengubah suai objek $route. Kaedah ini boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna, dan merupakan teknologi yang biasa digunakan dalam rangka kerja Vue.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan penghalaan untuk berkongsi data antara halaman dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!