Bagaimana untuk melompat antara dua laluan dalam vue (analisis ringkas kaedah)

Vue ialah rangka kerja JavaScript yang sangat popular yang membolehkan kami meningkatkan kecekapan pembangunan dengan membina aplikasi web berkomponen. Sistem penghalaan Vue.js membolehkan kami menavigasi antara halaman yang berbeza Artikel ini akan memperkenalkan cara untuk melompat antara dua laluan Vue.

Penghalaan Vue diselesaikan melalui pemalam vue-router. Pemalam vue-router menyediakan contoh penghala yang membolehkan kami menentukan dan mengurus laluan aplikasi kami. Untuk menggunakan vue-router, kita perlu memperkenalkannya dalam aplikasi Vue.

Tentukan laluan

Mula-mula, tentukan laluan dalam aplikasi Vue. Cara untuk menentukan laluan adalah dengan mentakrifkan pemetaan laluan Vue Router. Ia menentukan pemetaan antara laluan URL dan komponen Vue. Pemetaan laluan boleh ditakrifkan melalui atribut laluan bagi contoh vue-router.

Sebagai contoh, buat komponen Vue bernama "Home":

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

Kemudian kita boleh menentukan laluan dalam peta penghalaan untuk menghalakan laluan halaman utama ke komponen Home:

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

Dalam kod di atas, kami mula-mula menggunakan pernyataan import untuk mengimport pustaka Vue dan Vue Router serta komponen Home. Seterusnya, daftarkan Penghala Vue ke dalam aplikasi Vue melalui panggilan Vue.use(). Kemudian tentukan laluan peta laluan, yang mengandungi item laluan untuk menentukan laluan URL dan item komponen untuk menentukan komponen Vue bagi laluan yang sepadan. Akhir sekali, kami mencipta contoh penghala dan menyampaikannya kepada contoh Vue.

Menggunakan lompat laluan

Sekarang kita telah mencipta peta laluan dan menentukan laluan, langkah seterusnya ialah cara melakukan lompat laluan. Penghala Vue menyediakan dua jenis lompatan: navigasi deklaratif dan navigasi program.

Navigasi Pengisytiharan

Navigasi deklaratif merujuk kepada menggunakan komponen dalam komponen Vue untuk melompat ke laluan lain. Contohnya, gunakan teg dalam komponen Laman Utama untuk melompat ke komponen Perihal:

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

Di sini, kami menggunakan atribut to untuk menentukan laluan ke laluan sasaran lompatan. Vue menyelesaikan atribut kepada sebagai laluan penuh ke laluan lain.

Navigasi Programatik

Navigasi terprogram menggunakan kaedah $router dalam tika Vue Router untuk melompat antara laluan. Sebagai contoh, dalam komponen Laman Utama, kita boleh menggunakan kaedah $router.push untuk melompat ke komponen Perihal:

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="gotoAbout">About Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoAbout () {
      this.$router.push('/about')
    }
  }
}
</script>

Di sini, kami mentakrifkan kaedah gotoAbout, di mana kami menggunakan $router.push kaedah ke Laluan melompat ke laluan sasaran.

Ringkasan

Melalui dua kaedah di atas, kita boleh merealisasikan lompatan antara dua laluan Vue. Navigasi deklaratif dan navigasi program adalah kedua-duanya kaedah lompat penghalaan yang biasa digunakan dalam Penghala Vue. Dalam pembangunan sebenar, kita boleh memilih kaedah yang berbeza mengikut senario tertentu.

Atas ialah kandungan terperinci Bagaimana untuk melompat antara dua laluan dalam vue (analisis ringkas kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!