Cara vue-router melaksanakan lompatan penghalaan dan pemaparan halaman

Vue-router ialah alat pengurusan penghalaan rasmi Vue.js Ia menyokong membina aplikasi satu halaman (SPA) berdasarkan Vue.js Fungsi penghalaan yang disediakannya membolehkan kami mengawal lompatan halaman dengan menguruskan laluan dalam URL dan paparan.

Artikel ini akan menumpukan pada prinsip pelaksanaan asas Vue-router dan menganalisis cara Vue-router melaksanakan lompatan penghalaan dan pemaparan halaman.

1. Penggunaan asas Vue-router

Untuk menggunakan Vue-router, kita perlu melakukan langkah berikut:

1. Pasang Vue-router dan Vue. js

npm install vue-router

2. Buat contoh Vue

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

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
});

new Vue({
    router,
    el: '#app',
    template: '<app></app>',
    components: { App }
});

Dalam kod di atas, kami menggunakan kaedah Vue.use() untuk mendaftarkan Vue- penghala dan cipta contoh laluan dan jadikannya pilihan untuk tika Vue, supaya tika Vue dan setiap komponen keseluruhan aplikasi boleh menggunakan penghala Vue.

Pada masa yang sama, dalam contoh penghalaan, kami mentakrifkan dua objek penghalaan, setiap objek penghalaan terdiri daripada tiga atribut:

• laluan: laluan, menentukan objek penghalaan ini URL yang sepadan laluan;
• nama: nama laluan, yang berbeza daripada nama komponen Ia adalah nama untuk kemudahan dan boleh dipanggil dengan kaedah $router.push() dan $router.replace(); >
komponen: komponen, komponen yang sepadan dengan laluan semasa.

Dalam komponen Vue, kita boleh menggunakan objek $router dan $route untuk melaksanakan operasi berkaitan penghalaan:

$router: digunakan untuk melompat ke Penghalaan lain
• $route: digunakan untuk mendapatkan maklumat penghalaan semasa.

2. Prinsip pelaksanaan Vue-router

Prinsip asas Vue-router untuk melaksanakan lompatan penghalaan dan pemaparan halaman:

Dengar Perubahan URL

Vue-router memantau perubahan URL dan memaparkan halaman berbeza berdasarkan URL berbeza.

Dari segi pengikatan data, Vue.js secara dalaman merangkum kaedah Object.defineProperty(), yang melaluinya pengikatan dua hala data dicapai. Walau bagaimanapun, Vue.js tidak mempunyai cara untuk menangani perubahan URL. Oleh itu Vue-router memerlukan cara baharu untuk memantau perubahan URL.

Vue-router menggunakan API penghalaan H5 — history.pushState(state, title, url) dan history.replaceState(state, null, url) untuk memantau perubahan URL. Apabila URL berubah, Vue-router akan mencetuskan mekanisme perubahan penghalaan dalaman dan menggunakan URL semasa untuk menyimpulkan komponen yang perlu diberikan.

Peraturan penghalaan yang sepadan

Vue-router akan menentukan sama ada laluan ke hadapan atau ke belakang dengan membandingkan URL sebelumnya dengan URL seterusnya apabila laluan berubah, dan kemudian Panggil kaedah yang berbeza untuk memaparkan pandangan yang berbeza.

Di dalam Vue-router, peraturan penghalaan akan dihuraikan ke dalam rekod penghalaan Setiap rekod penghalaan mengandungi laluan URL dan maklumat komponen yang sepadan. Rekod penghalaan ini disimpan dalam jadual penghalaan dalaman.

Apabila URL berubah, Vue-router akan mencari rekod penghalaan yang sepadan dengan laluan URL semasa daripada jadual penghalaan dengan memadankan laluan URL jika wujud, ini bermakna laluan URL itu sah dan kemudian menghuraikan komponen yang perlu diberikan.

Komponen pemaparan

Jika peraturan penghalaan undang-undang dipadankan, Vue-router akan menggunakan komponen yang ditakrifkan dalam peraturan penghalaan untuk memaparkan halaman yang perlu dipaparkan.

Apabila membuat komponen, idea utama Vue-router adalah untuk melekapkan komponen yang akan dipaparkan pada komponen RouterView Apabila laluan berubah, komponen RouterView akan memaparkan maklumat yang sepadan berdasarkan laluan semasa merekodkan komponen.

Vue-router juga menyediakan beberapa API navigasi laluan, seperti $router.push() dan $router.replace(), yang digunakan untuk melompat dan menggantikan laluan dalam komponen.

3. Ringkasan

Vue-router, sebagai alat pengurusan penghalaan rasmi Vue.js, boleh membantu kami membina aplikasi satu halaman dengan cepat. Prinsip pelaksanaan asas Vue-router dilaksanakan terutamanya dengan memantau perubahan URL, memadankan peraturan penghalaan dan komponen pemaparan. Vue-router secara dalaman merangkum mekanisme perubahan penghalaan, yang boleh menentukan sama ada untuk bergerak ke hadapan atau ke belakang berdasarkan perubahan dalam URL, dan memaparkan paparan yang sepadan. Pada masa yang sama, Vue-router menyediakan API yang mudah untuk penghalaan lompatan dan penggantian dalam komponen Vue. Menguasai prinsip dan penggunaan Vue-router boleh membantu kami membina aplikasi satu halaman dengan lebih baik dan meningkatkan keupayaan pembangunan bahagian hadapan kami.

Atas ialah kandungan terperinci Cara vue-router melaksanakan lompatan penghalaan dan pemaparan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!