Bagaimana untuk menggunakan penghalaan untuk melaksanakan penghantaran mesej antara halaman dalam Vue?

Bagaimana untuk menggunakan penghalaan untuk melaksanakan penghantaran mesej antara halaman dalam Vue?

Dalam pembangunan Vue, pemesejan antara halaman yang berbeza adalah keperluan biasa. Penghalaan Vue menyediakan cara yang mudah untuk melaksanakan penghantaran mesej antara halaman. Artikel ini akan memperkenalkan cara menggunakan penghalaan Vue untuk melaksanakan penghantaran mesej antara halaman dan memberikan contoh kod terperinci.

1. Konfigurasi penghalaan
Pertama, kita perlu mengkonfigurasi penghalaan. Dalam projek Vue, anda boleh menggunakan pemalam vue-router untuk pengurusan penghalaan. Pasang vue-router melalui npm dan perkenalkan serta gunakannya dalam main.js. Katakan projek kami mempunyai dua halaman, Laman Utama dan Perihal.

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

Dalam kod di atas, kami menentukan dua peraturan penghalaan, sepadan dengan dua komponen Laman Utama dan Perihal. Seterusnya, kita boleh menggunakan objek $route dalam komponen untuk mendapatkan maklumat penghalaan dan menggunakan kaedah this.$router.push() untuk melompat ke halaman.

2. Lompat halaman
Dalam komponen Vue, anda boleh melompat ke halaman melalui kaedah ini.$router.push(). Kita boleh menghantar mesej yang perlu dihantar sebagai parameter penghalaan ke halaman sasaran.

// Home.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="gotoAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello',
    }
  },
  methods: {
    gotoAbout() {
      this.$router.push({
        path: '/about',
        query: {
          message: this.message,
        },
      })
    },
  },
}
</script>

Dalam kod di atas, kami mentakrifkan mesej dalam komponen Laman Utama dan menyediakan butang untuk melompat ke halaman Perihal. Melalui kaedah ini.$router.push(), kami menghantar mesej sebagai parameter pertanyaan ke halaman Perihal.

// About.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="goBack">Go Back</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  mounted() {
    this.message = this.$route.query.message
  },
  methods: {
    goBack() {
      this.$router.push('/')
    },
  },
}
</script>

Dalam komponen Perihal, kami menggunakan ini.$route.query.message untuk menghantar mesej daripada halaman Utama dan memaparkannya pada halaman. Pada masa yang sama, kami juga menyediakan butang yang boleh kembali ke halaman Utama selepas mengkliknya.

3. Ringkasan
Melalui fungsi penghalaan Vue, kami boleh melaksanakan pemesejan antara halaman dengan mudah. Apabila halaman melompat, mesej boleh dihantar ke halaman sasaran sebagai parameter penghalaan, dan mesej yang diluluskan boleh diperolehi melalui objek this.$route dalam halaman sasaran.

Artikel ini menggunakan contoh mudah untuk memperkenalkan cara menggunakan penghalaan Vue untuk melaksanakan penghantaran mesej antara halaman. Dalam pembangunan sebenar, kami boleh menggunakan fungsi penghalaan yang lebih maju untuk memenuhi keperluan kami berdasarkan keperluan khusus.

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