Artikel ini akan memberi anda penjelasan terperinci tentang Vue Vue-Router dalam FamilyBucket dan belajar tentang pengetahuan penghalaan saya harap ia akan membantu semua orang.

Sejarah pembangunan penghalaan hadapan

Konsep penghalaan muncul dalam kejuruteraan perisian dan mula-mula dilaksanakan di belakang- penghalaan akhir , sebabnya pembangunan web telah melalui peringkat berikut:

• peringkat penghalaan hujung belakang
• peringkat pemisahan bahagian hadapan dan hujung belakang ;
• Aplikasi Kaya Halaman Tunggal (SPA) ; Seperti yang ditunjukkan dalam gambar:

Kelebihan: Kondusif untuk pengoptimuman SEO

Kelemahan: Seluruh halaman diselenggara oleh kakitangan bahagian belakang, dan kod HTMl dan data logik yang sepadan akan dicampur bersama dan ditulis Dan penyelenggaraan sangat lemah.

2. Pemisahan bahagian hadapan dan bahagian belakang

**Penyebaran bahagian hadapan:** Sumber statik yang terlibat dalam setiap permintaan akan diperoleh daripada statik pelayan sumber, sumber ini termasuk HTML CSS JS, dan kemudian memberikan sumber yang dikembalikan oleh permintaan ini di bahagian hadapan. Setiap permintaan daripada pelanggan akan meminta fail daripada pelayan sumber statik Pada masa ini, bahagian belakang hanya

bertanggungjawab untuk menyediakan API

.

Pengasingan bahagian hadapan dan bahagian belakang:

Bahagian belakang hanya bertanggungjawab untuk menyediakan API Bahagian hadapan memperoleh data melalui Ajax dan memaparkan data ke halaman melalui JavaScriptHalaman belakang memfokuskan pada data, dan bahagian hadapan memfokuskan pada interaksi dan visualisasi

Halaman Tunggal (SPA ) peringkat aplikasi yang kaya:

• Asingkan antara hujung hadapan dan belakang Lapisan penghalaan bahagian hadapan ditambah berdasarkan
• Ujung hadapan mengekalkan satu set peraturan penghalaan

Teras: Tukar URL halaman, tetapi jangan muat semula halaman.

Kenali vue-router
• Pasang Vue-Router
• Langkah:

Buat komponen penghalaan yang perlu dipetakan [Cadangan berkaitan:

tutorial video vue

]

npm?install?vue-router

Buat objek penghalaan melalui createRouter, dan masukkan

laluan dan mod sejarah

• Gunakan apl untuk mendaftarkan objek penghalaan (gunakan kaedah)

• Penggunaan laluan: melalui dan

Tambahan: Atribut laluan lain

atribut nama: rekod Nama unik laluan;

atribut meta: data tersuai

import?{?createRouter,?createWebHashHistory?}?from?"vue-router"

import?Home?from?"../views/Home.vue"
import?About?from?"../views/About.vue"
//?創(chuàng)建一個路由：映射關(guān)系
const?router?=?new?createRouter({
??history:?createWebHashHistory(),
??routes:?[
????{
??????path:?"/",
??????redirect:?"/home"
????},
????{
??????path:?"/home",
??????component:?Home
????},
????{
??????path:?"/about",
??????component:?About
????}
??]
})

export?default?router

pautan-penghala (tambahan)

penghala -pautan sebenarnya mempunyai Banyak atribut boleh dikonfigurasikan:

kepada atribut: Ia adalah rentetan atau objek

atribut ganti: Jika anda menetapkan atribut ganti, apabila diklik, penghala. replace( akan dipanggil ) bukannya router.push(). Secara amnya, atribut ganti tidak digunakan dan pengalaman pengguna tidak begitu baik. atribut kelas aktif: Tetapkan kelas yang digunakan selepas mengaktifkan elemen A lalai ialah pautan penghala

atribut kelas aktif-tepat: Apabila pautan diaktifkan dengan tepat, ia. digunakan pada kelas pemaparan, lalai ialah pautan-penghala-tepat-aktif; , pakej JavaScript akan menjadi sangat Besar, menjejaskan pemuatan halaman

Penyelesaian: Pisahkan komponen yang sepadan dengan laluan yang berbeza kepada blok kod yang berbeza, dan kemudian muatkan komponen yang sepadan apabila laluan itu diakses. Pada masa yang sama, ia juga boleh meningkatkan kecekapan pemaparan skrin pertama. Antaranya, Vue-Router menyokong pemuatan dinamik komponen secara lalai. Kerana komponen boleh diluluskan dalam komponen atau menerima fungsi, fungsi itu perlu meletakkan semula Janji. Fungsi
• import mengembalikan Janji
• Penghalaan Dinamik

Asas penghalaan dinamik Padankan

memetakan laluan untuk corak padanan yang diberikan kepada komponen yang sama. Anda boleh memuatkan laluan berbeza mengikut keperluan anda yang berbeza untuk mencapai pelaksanaan dan pemaparan halaman yang berbeza.

Penghalaan dinamik biasanya digunakan bersama-sama dengan kawalan kebenaran peranan.

Contohnya: Terdapat komponen Pengguna, yang sepatutnya diberikan kepada semua pengguna, tetapi ID pengguna adalah berbeza. Kita boleh melakukan ini dengan menggunakan medan dinamik dalam laluan, yang kita panggil parameter laluan. Kemudian laksanakan lompat masuk .

2. 獲取動態(tài)路由的值

獲取動態(tài)路由的值(例如上面例子中 用戶id 123)，在template中，直接通過 $route.params獲取值。

• 在created中，通過 this.$route.params獲取值
• 在setup中，我們要使用 vue-router庫給我們提供的一個hook useRoute

3. NotFound

對于沒有匹配到相應(yīng)的路由，我們可以給用戶匹配一個固定的頁面。通過 $route.params.pathMatch獲取到傳入的參數(shù)

路由的嵌套

組件的本身也有組件需要內(nèi)部切換，這個時候就可以采用嵌套路由，在第一層路由中也使用router-view來占位之后需要渲染的組件。

{
??????path:?"/home",
??????component:?()?=>?import("../views/Home.vue"),
??????children:?[
????????{
??????????path:?"/show",
??????????component:?()?=>?import("../views/component/show.vue")
????????},
????????{
??????????path:?"/detail",
??????????component:?()?=>?import("../views/component/detail.vue")
????????}
??????]
????},

編程式導(dǎo)航

1. 代碼的頁面跳轉(zhuǎn)

通過代碼來控制頁面的跳轉(zhuǎn)

栗子：點擊一個按鈕跳轉(zhuǎn)頁面

2. query 方式的參數(shù)

通過query的方式來傳遞參數(shù)，在界面中通過 $route.query 來獲取參數(shù)。

3. 替換當(dāng)前的位置

使用push的特點是壓入一個新的頁面，那么在用戶點擊返回時，上一個頁面還可以回退，但是如果我們希望當(dāng)前頁面是一個替換 操作，那么可以使用replace。這個時候已經(jīng)不能回退了。

4. 頁面的前后跳轉(zhuǎn)

• router 的 go 方法（指定向前(向后)跳轉(zhuǎn)幾步）

• router 的back 方法 （回溯歷史，向后一步）

• router 的forward 方法（歷史中前進，向前一步）

動態(tài)添加路由

場景：根據(jù)用戶的不同權(quán)限，注冊不同的路由

補充：路由的其他方法

刪除路由有以下三種方式：

• 方式一：添加一個name相同的路由；
• 方式二：通過removeRoute方法，傳入路由的名稱；
• 方式三：通過addRoute方法的返回值回調(diào)；

router.hasRoute()：檢查路由是否存在。

router.getRoutes()：獲取一個包含所有路由記錄的數(shù)組。

路由導(dǎo)航守衛(wèi)

vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航

全局的前置守衛(wèi)==beforeEach==是在導(dǎo)航觸發(fā)時會被回調(diào)的,它有兩個參數(shù)：

• to：即將進入的路由Route對象；
• from：即將離開的路由Route對象；

返回值：

• false：取消當(dāng)前導(dǎo)航；
• 不返回或者undefined：進行默認導(dǎo)航；
• 返回一個路由地址：可以是一個String類型的路徑也可以是一個對象

1. 登錄守衛(wèi)功能

場景：只有登錄了的用戶才能看到的頁面

2. 其他導(dǎo)航守衛(wèi)

Vue還提供了很多的其他守衛(wèi)函數(shù)，目的都是在某一個時刻給予回調(diào)，可以更好的控制程序的流程或者功能

[導(dǎo)航守衛(wèi)](導(dǎo)航守衛(wèi) | Vue Router (vuejs.org))

流程：

• 導(dǎo)航被觸發(fā)。

• 在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。

• 調(diào)用全局的 beforeEach 守衛(wèi)。

• 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi)(2.2+)。

• 在路由配置里調(diào)用 beforeEnter。 ? 解析異步路由組件。

• 在被激活的組件里調(diào)用 beforeRouteEnter。

• Panggil pengawal global beforeResolve (2.5).

• Navigasi disahkan.

• Panggil cangkuk afterEach global.

• Cetuskan kemas kini DOM.

• Panggil fungsi panggil balik yang dihantar ke seterusnya dalam pengawal beforeRouteEnter, dan contoh komponen yang dibuat akan dihantar sebagai parameter fungsi panggil balik.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Artikel yang menerangkan penghalaan Vue secara terperinci: vue-router. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!