[Kompilasi dan perkongsian] Beberapa soalan temu bual berkaitan vue-router (dengan analisis jawapan)

Artikel ini meringkaskan dan berkongsi beberapa soalan temu bual berkaitan vue-router (dengan analisis jawapan) untuk membantu anda menyusun pengetahuan asas dan meningkatkan rizab pengetahuan vue-router anda Perlu dikumpulkan, datang dan lihat!

Prinsip vue-router

Dalam aplikasi satu halaman, penukaran antara komponen yang berbeza perlu dilaksanakan melalui hadapan- penghalaan tamat.

Penghalaan bahagian hadapan

1 kekunci ialah laluan, nilai ialah komponen, digunakan untuk memaparkan kandungan halaman
2. Proses kerja: apabila laluan pelayar berubah, komponen yang sepadan akan dipaparkan. Fungsi penghalaan
vue-router: memetakan komponen ke laluan, dan kemudian menjadikannya

Perkara utama ialah

• Bagaimana untuk tukar URL tetapi tidak Menyebabkan muat semula halaman

• Cara mengesan perubahan URL [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web ]

Corak hash penghalaan

• hash ialah sebahagian daripada # dan mengikut URL, tidak akan dihantar ke pelayan, # jadi menukar bahagian cincang URL tidak akan menyebabkan halaman dimuat semula

• tetingkap boleh mendengar

  perubahan acara. Apabila cincang berubah, baca kandungan selepas onhashchange, padankan peraturan penghalaan berdasarkan maklumat dan tukar penghalaan halaman dengan menukar #. window.location.hash

Tiga cara untuk menukar URL

Tukar URL melalui penyemak imbas ke hadapan dan ke belakang
• Tukar URL melalui teg
• Tukar URL melalui tetingkap.lokasi

Kelebihan

Hanya bahagian hadapan perlu mengkonfigurasi jadual penghalaan, tiada penyertaan bahagian belakang diperlukan
• Keserasian yang baik, semua pelayar menyokongnya
• Perubahan dalam nilai cincang tidak akan menghantar permintaan ke bahagian belakang, ia sepenuhnya di hadapan- penghalaan tamat

Kelemahan

Nilai cincang perlu didahului dengan #, yang tidak mematuhi spesifikasi url dan adalah tidak cantik.

Mod Sejarah Penghalaan - Gunakan kaedah dan baharu dalam antara muka sejarah HTML5 untuk menambah dan mengubah suai sejarah penyemakan imbas menggunakan API sejarah H5

• pushState() Rekod, tukar laluan halaman, replaceState()buat URL melompat tanpa memuatkan semula halaman.

• Acara

  serupa dengan acara hashchange , tetapi acara popstate sedikit berbeza: popstate popState hanya akan dipanggil selepas melakukan
  tindakan penyemak imbas , ia akan dicetuskan apabila pengguna mengklik butang belakang dan butang hadapan penyemak imbas, atau menggunakan JavaScript untuk memanggil kaedah History.back(), History.forward(), dan History.go().

Kelebihan

• Mematuhi spesifikasi alamat URL, tidak memerlukan # dan lebih cantik untuk digunakan

Kelemahan

Apabila pengguna
• memasukkan alamat secara manual atau memuat semula halaman, permintaan url akan dimulakan , dan bahagian belakang perlu mengkonfigurasi halaman index.html Pengguna tidak boleh memadankan sumber statik, jika tidak, ralat 404 akan berlaku
mempunyai keserasian yang lemah. Ia menggunakan kaedah
• dan pushState() baharu dalam HTML5 Objek sejarah dan memerlukan sokongan penyemak imbas tertentu .replaceState()

Apakah perbezaan antara $route dan $router?

$router ialah objek contoh VueRouter, mewakili satu-satunya objek penghala untuk keseluruhan aplikasi. Mengandungi kaedah lompat penghalaan, fungsi cangkuk, dsb.

$route ialah objek penghalaan semasa, yang mewakili peraturan penghalaan komponen ini Setiap laluan akan mempunyai objek laluan, iaitu objek tempatan.

Apakah perbezaan antara beberapa cara menghantar parameter vue-router?

-Bolehkah saya menghantar parameter tanpa nilai yang diperlukan?

Penerangan

Cara untuk menentukan laluan lompatan

Jika tiada parameter dilalui

parameter params

Path/params parameter

Anda mesti menggunakan nama untuk menentukan laluan

params ialah sebahagian daripada laluan, jika ruang letak dikonfigurasikan, ia mestilah Jika laluan ini mempunyai parameter params, tetapi parameter ini tidak diluluskan semasa lompatan, lompatan akan gagal atau halaman tidak akan mempunyai kandungan.

-	描述	如何指定跳转的路由	如果没有传参	可以传参没有要求的值吗
params参数	路径/params参数	必须要使用name指定路由	params是路由的一部分,如果在配置了占位符必须要有 如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。	传递路径上没有的占位符，地址栏上不会显示并且刷新会丢失
query参数	路径? key1=val1 & key2=val2....	1.可以使用name指定路由 2.可以使用path指定路由	query是拼接在url后面的参数，没有也没关系	query不会

Pemegang tempat yang tidak termasuk dalam laluan penghantaran tidak akan dipaparkan pada bar alamat dan akan hilang apabila menyegarkan

parameter pertanyaan td>

Path? key1=val1 & key2=val2....

1 route2 Ya Gunakan laluan untuk menentukan laluan

pertanyaan ialah parameter yang disambungkan selepas url, tidak mengapa jika anda tidak memilikinya td>

pertanyaan tidak akan

Masalah kehilangan parameter Vue-router

Apabila parameter params diluluskan, parameter yang diterima oleh pemegang tempat tetapan diluluskan dan bar alamat tidak akan dipaparkan dan Muat semula akan hilang.

Penyelesaian: Anda boleh mendapatkan parameter melalui this.$route.params dan menyimpannya secara setempat

Berapa banyak fungsi cangkuk yang terdapat pada vue-router? Apakah sebenarnya dan apakah proses pelaksanaannya?

vue-router Pengawal navigasi yang disediakan terutamanya digunakan untuk menjaga navigasi dengan melompat atau membatalkan.

• Pengawal laluan global: Terdapat berbilang panggilan berdasarkan susunan penciptaan.
  • router.beforeEach() Pengawal hadapan global, dicetuskan setiap kali anda menavigasi .
  • router.afterEach() Pengawal laluan pos global, selepas setiap lompatan laluan selesai. tidak akan menerima fungsi seterusnya , dan lompatan telah selesai dan telah memasuki komponen
  • router.beforResolve() Pengawal parsing global, sebelum lompatan penghalaan, semua pengawal dalam komponen Dan Komponen penghalaan tak segerak dicetuskan selepas ia dihuraikan, ia juga akan dicetuskan pada setiap navigasi. Selepas penghuraian selesai, navigasi ditentukan dan bersedia untuk melompat.
• Pengawal laluan dalam komponen
  • beforeRouteEnter() dipanggil sebelum laluan memasuki komponen ini selepas beforeEach dan beforeEnter.
    Anda belum memasukkan komponen lagi dan tika komponen belum dibuat lagi. Oleh itu, tika komponen tidak boleh diperolehi Pada masa ini, ini tidak ditentukan dan dicetuskan sebelum beforeCreate kitaran hayat.
  • beforeRouteUpdate() ini sudah tersedia, jadi tidak perlu menghantar panggilan balik ke seterusnya. Untuk laluan /foo/:id dengan parameter dinamik, apabila melompat antara /foo/1 dan /foo/2, kerana komponen Foo bersatu akan diberikan, tika komponen ini akan digunakan semula dalam kes ini.
  • beforeRouteLeave()Dipanggil apabila meninggalkan komponen, ini sudah tersedia, jadi tidak perlu menghantar panggilan balik ke seterusnya.
• Pengawal laluan eksklusif
  • beforeEnter() Anda perlu menentukan pengawal beforeEnter pada konfigurasi penghalaan Pengadang ini hanya digunakan apabila memasuki laluan. Pencetus , dilaksanakan serta-merta selepas sebelumSetiap, dan tidak akan dicetuskan apabila param, pertanyaan atau cincangan berubah.

Susunan panggilan sebelum memasuki komponenbeforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() Proses ini tidak boleh digunakan kerana contoh komponen belum dibuat lagi, jadi anda perlu menggunakan fungsi seterusnya

Proses analisis navigasi lengkap
1. Navigasi dicetuskan.
2. Panggil pengawal beforeRouteLeave dalam komponen yang dinyahaktifkan.
3. Panggil pengawal beforeEach global.
4. Panggil pengawal beforeRouteUpdate dalam komponen yang digunakan semula.
5. Panggil beforeEnter dalam konfigurasi penghalaan.
6. Menghuraikan komponen penghalaan tak segerak.
7. Panggil beforeRouteEnter dalam komponen yang diaktifkan.
8. Panggil pengawal beforeResolve global.
9. Navigasi disahkan.
10. Panggil cangkuk afterEach global.
11. Cetuskan kemas kini DOM.
12. Panggil beforeRouteEnter pengawal dan hantar ke fungsi panggil balik seterusnya.

kekal-hidup

boleh melaksanakan caching komponen, yang tidak akan berlaku apabila komponen dihidupkan. Teg keep-alive

terutamanya mempunyai tiga atribut: termasuk, kecualikan dan maks dicache secara bersyarat. contoh dicipta. keep-alive

Dua kitaran hayat
• , digunakan untuk mengetahui sama ada komponen semasa aktif. includeexcludekeep-alive
Pengurusan cache prinsip kekalkan + proses lekap/nyahlekap khas
• maxProses nyahlekap/lekap khas:

Pengurusan cache:

LRU ( Paling Kurang Digunakan Baru-baru ini) ialah algoritma penyingkiran activated/deactivated

Proses nyahpasang/lekap khas

Memandangkan komponen tidak boleh dinyahpasang dengan benar, Jadi keep-alive mengalihkan komponen dari bekas asal ke bekas palsu yang lain untuk mencapai penyahpasangan palsu. Apabila dipasang, ia dipindahkan dari bekas tersembunyi ke bekas asal. Sepadan dengan

dan activated/deactivated kitaran hayat komponen
keepAlive akan menandakan komponen dalaman (yang perlu dicache)

• Tambahkan atribut shouldKeepAlive pada objek vnode komponen dalaman untuk memberitahu pemapar bahawa apabila komponen dipunggah, komponen itu perlu dicache dan tidak sebenarnya dipunggah

• Tambah keptAlive pada objek vnode Atribut komponen dalaman, jika komponen telah dicache, tambahkan tanda untuk menunjukkan bahawa pemapar tidak akan dipasang semula dan boleh diaktifkan secara langsung.

Strategi cache: Paling Kurang Digunakan Baru-baru Ini

Gunakan cache objek Peta ke komponen cache nilai vnode.type, dan nilainya ialah vnode对象, kerana terdapat rujukan kepada contoh komponen (vnode.component) dalam objek vnod komponen

• cache Yang pertama digunakan untuk menyimpan komponen cache maya
• keys Yang terakhir digunakan untuk menyimpan koleksi kunci komponen cache

• untuk menjana cache kunci berdasarkan ID komponen dan teg, dan simpannya dalam objek cache Cari sama ada tika komponen telah dicache. Jika ia wujud, dapatkan terus nilai cache dan kemas kini kedudukan kunci dalam kekunci (mengemas kini kedudukan kunci ialah kunci untuk melaksanakan strategi penggantian LRU).

• Jika ia tidak wujud, simpan tika komponen dalam objek peta dan simpan nilai kunci Kemudian semak sama ada bilangan kejadian cache melebihi nilai tetapan maksimum nilai tetapan maks, padamkan yang terbaharu mengikut dasar penggantian LRU Contoh yang paling lama tidak digunakan (iaitu, kunci dengan indeks 0).

(Mempelajari perkongsian video: tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci [Kompilasi dan perkongsian] Beberapa soalan temu bual berkaitan vue-router (dengan analisis jawapan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!