Bagaimana untuk menukar vue menjadi pautan penghalaan (analisis ringkas kaedah)

Vue ialah rangka kerja bahagian hadapan yang sangat popular dan digunakan secara meluas dalam pembangunan bahagian hadapan. Vue menyediakan fungsi pengurusan penghalaan yang sangat mudah, yang boleh membantu kami membina aplikasi satu halaman dan meningkatkan kelajuan akses halaman hadapan dan pengalaman pengguna. Artikel ini akan memperkenalkan cara menukar Vue menjadi pautan penghalaan.

Apakah itu penghalaan Vue

Penghalaan Vue ialah pemalam pengurusan penghalaan yang disediakan oleh Vue.js untuk membina aplikasi satu halaman. Dengan menggunakan penghalaan Vue, kami boleh menyusun berbilang halaman dalam tapak web kami ke dalam satu halaman. Ini sangat berguna untuk membina aplikasi web yang besar dan kompleks.

Menggunakan penghalaan Vue, kami boleh beralih ke halaman yang berbeza dengan lebih pantas tanpa memuatkan semula keseluruhan halaman. Dalam penghalaan Vue, setiap halaman mempunyai URL sendiri, yang boleh diakses terus dalam bar alamat penyemak imbas.

Cara menukarnya kepada pautan yang dihalakan

Apabila kami menggunakan Vue untuk membina aplikasi, kami biasanya menggunakan Vue CLI (alat perancah) untuk membantu kami membina rangka aplikasi dengan cepat. Vue CLI akan mengkonfigurasi penghalaan secara automatik untuk kami, kami hanya perlu menambah komponen halaman.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan penghalaan Vue. Pertama, kita perlu memasang pemalam Vue Router.

npm install vue-router --save

Kemudian dalam aplikasi Vue kami, kami perlu mengimport pemalam Vue Router dan mencipta contoh Vue Router. Kita boleh menggunakan contoh ini untuk mentakrifkan laluan dan memberitahu Vue cara menukar dari satu laluan ke laluan yang lain.

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes 
})

Dalam kod di atas, kami mentakrifkan tiga laluan: Rumah, Perihal dan Kenalan. Laluan ini sepadan dengan komponen yang berbeza (komponen berada di luar skop artikel ini).

Kini kami telah menentukan laluan kami, tetapi jika kami ingin mengakses laluan ini dalam penyemak imbas, kami perlu memautkan laluan ini ke aplikasi Vue kami. Kami boleh menyelesaikan tugas ini dengan menggunakan komponen <router-link></router-link> dalam aplikasi kami. Teg

<router-link>Home</router-link>
<router-link>About</router-link>
<router-link>Contact</router-link>

<router-link></router-link> akan menjana pautan lompat secara automatik dan menghantar permintaan ke penghalaan Vue apabila pengguna mengklik pautan. Penghalaan Vue akan bertanggungjawab untuk memuatkan komponen yang sepadan dan memaparkannya pada halaman.

Apabila menggunakan teg <router-link></router-link>, sila ambil perhatian: atribut to harus menghala ke laluan yang kami takrifkan dalam fail router.js.

Kini kita boleh melawati http://localhost:8080 dalam penyemak imbas dan akan melihat aplikasi Vue kami. Apabila kita mengklik tag <router-link></router-link>, ia secara automatik akan melompat ke komponen yang sepadan.

Ringkasan

Penghalaan Vue menyediakan kami alat pembangunan aplikasi satu halaman yang sangat mudah. Menggunakan penghalaan Vue dalam aplikasi Vue boleh meningkatkan prestasi dan pengalaman pengguna aplikasi web dengan sangat baik. Menggunakan komponen <router-link></router-link>, kami boleh membuat pautan dalam aplikasi Vue kami dan secara automatik melompat ke halaman yang berbeza.

Apabila menggunakan penghalaan Vue, anda perlu ambil perhatian bahawa atribut to harus menghala ke laluan yang kami takrifkan dalam fail router.js. Pada masa yang sama, anda boleh menggunakan atribut $route dan $router dalam komponen untuk mendapatkan dan mengawal status laluan semasa.

Atas ialah kandungan terperinci Bagaimana untuk menukar vue menjadi pautan penghalaan (analisis ringkas kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!