Bagaimana untuk menggunakan penghalaan untuk bertukar antara halaman dan memindahkan parameter dalam projek Vue?

Bagaimana untuk menggunakan penghalaan untuk bertukar antara halaman dan memindahkan parameter dalam projek Vue?

Dalam projek Vue, kita boleh menggunakan Penghala Vue untuk bertukar antara halaman dan lulus parameter. Penghala Vue ialah pemalam yang disyorkan secara rasmi untuk melaksanakan fungsi penghalaan Ia boleh melaksanakan penukaran halaman dengan mudah dalam aplikasi satu halaman dan menyokong parameter lulus.

Pertama, kita perlu memasang pemalam Vue Router dalam projek Vue. Ia boleh dipasang melalui arahan npm:

npm install vue-router

Selepas pemasangan, perkenalkan Vue Router dalam fail kemasukan projek (biasanya main.js) dan buat contoh penghalaan:

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

Dalam kod di atas, kami memperkenalkan VueRouter melalui pernyataan import , Dan daftarkan pemalam dalam contoh Vue. Seterusnya, kami menentukan laluan objek konfigurasi penghalaan, yang mengandungi dua laluan penghalaan dan komponen yang sepadan. Apabila mengakses laluan akar '/', komponen Laman Utama akan dipaparkan apabila mengakses '/about', komponen Perihal akan dipaparkan. Akhir sekali, kami mencipta contoh penghalaan dengan membuat seketika VueRouter dan menghantar objek konfigurasi penghalaan.

Selepas membuat contoh penghalaan, kami boleh menggunakan dan dalam komponen Vue untuk bertukar antara halaman.

ialah komponen yang disediakan oleh Vue Router, digunakan untuk menjana pautan secara automatik menjadi teg. Kami boleh menggunakan dalam templat komponen untuk bertukar antara halaman. Sebagai contoh, dalam templat komponen Laman Utama, kita boleh menggunakan seperti ini:

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

Dalam kod di atas, apabila pautan "Go to About" diklik, ia akan melompat ke laluan /about .

ialah komponen yang disediakan oleh Vue Router, digunakan untuk memaparkan komponen yang sepadan dengan laluan semasa. Kita boleh menggunakan dalam templat komponen Vue untuk memaparkan komponen yang sepadan dengan laluan semasa. Sebagai contoh, dalam templat komponen Apl, kita boleh menggunakan seperti ini:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Dengan cara ini, apabila laluan '/' atau '/about' diakses, komponen Laman Utama dan komponen Perihal akan diberikan masing-masing.

Selain bertukar antara halaman, Penghala Vue juga menyokong parameter lulus. Apabila mentakrifkan laluan penghalaan, anda boleh menentukan parameter dengan menggunakan ruang letak dalam laluan. Sebagai contoh, kita boleh menentukan laluan penghalaan yang mengandungi parameter:

{
  path: '/user/:id',
  name: 'user',
  component: User
}

Dalam kod di atas, kita mentakrifkan laluan penghalaan /user/:id, dengan :id ialah parameter. Apabila kita mengakses /user/123, :id akan digantikan dengan nilai sebenar, contohnya, :id akan digantikan dengan 123.

Dalam komponen Vue, kita boleh mendapatkan parameter penghalaan melalui ini.$route.params. Sebagai contoh, dalam komponen Pengguna, kita boleh mendapatkan parameter penghalaan seperti ini:

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出路由参数的值
  }
}

Kod di atas akan mengeluarkan nilai parameter penghalaan selepas komponen Pengguna dimuatkan.

Ringkasnya, melalui pemalam Vue Router, kami boleh menukar antara halaman dan memindahkan parameter dengan mudah dalam projek Vue. Penukaran halaman dicapai melalui dan , dan parameter diluluskan dengan mentakrifkan laluan penghalaan. Menggunakan Penghala Vue boleh meningkatkan kebolehselenggaraan dan kebolehskalaan projek, menjadikan penukaran halaman dan pemindahan parameter lebih fleksibel dan mudah.

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