Sudah tentu, ini anda pergi,
Dalam pengaturcaraan, adalah penting untuk memahami apa itu URL asas; ia adalah punca tempat semua laluan permohonan kami berada. Dalam Vue.js, salah satu rangka kerja JavaScript yang paling popular, idea ini menjadi sangat penting apabila penghalaan. Dalam artikel ini, kami akan menumpukan pada cara mendapatkan URL asas dalam Vue.js.
Vue.js ialah Rangka Kerja JavaScript progresif yang mudah difahami oleh pengguna. Walaupun ia sangat berkuasa untuk membina aplikasi halaman tunggal, pembangun sering menghadapi beberapa cabaran. Salah satunya mungkin mendapatkan URL asas.
let baseUrl = window.location.host; let protocol = window.location.protocol;
Memahami Kod Di Atas
Dalam coretan kod JavaScript di atas, kami pada asasnya memanggil sifat hos dan protokol objek window.location. Objek ini agak berguna kerana ia boleh digunakan untuk mendapatkan alamat halaman semasa (URL) dan untuk mengubah hala pelayar ke halaman baharu.
Window.location.host mengembalikan nama hos (nama domain) dan port (jika ada) halaman web dan window.location.protocol mengembalikan protokol web yang digunakan (http:// atau https://). Gabungkan kedua-dua ini, dan anda mempunyai URL asas anda.
Pecahan Terperinci Kod
Objek tetingkap mewakili tetingkap terbuka dalam pelayar. Ia dicipta secara automatik oleh pelayar semasa halaman dimuatkan. Objek window.location atau ringkasnya location boleh digunakan untuk mendapatkan maklumat tentang alamat halaman semasa (URL) dan untuk mengalihkan pelayar ke halaman baharu.
let baseUrl = protocol + "//" + baseUrl;
Di sini, kami menggabungkan protokol (yang kami peroleh menggunakan window.location.protocol), dua garis miring dan baseUrl (yang kami peroleh menggunakan window.location.host) bersama-sama untuk membentuk URL asas kami dalam Vue.js.
Perpustakaan dan Fungsi Berkaitan
Vue Router ialah penghala rasmi untuk Vue.js. Ia berfungsi dengan baik dengan ekosistem Vue.js dan menjadikan pembinaan aplikasi halaman tunggal dengan Vue.js mudah. Vue Router mempunyai sifat asas dalam pembinanya di mana anda boleh menetapkan URL asas untuk semua laluan.
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
Sekali lagi, menggunakan process.env.BASE_URL , anda boleh menetapkan URL asas untuk aplikasi anda dengan cara yang lebih abstrak jika anda sudah menggunakan Vue Router.
Kesimpulan
Dalam artikel ini, kami menyelidiki konsep URL asas, sebab ia diperlukan dan cara ia boleh diperoleh dalam aplikasi Vue.js. Kami juga melihat ke dalam Penghala Vue dan cara menggunakannya untuk menyediakan URL asas. Penyelesaian ini amat berguna apabila berurusan dengan aplikasi satu halaman dalam rangka kerja Vue.js.
Dengan ini dalam kit alat anda, anda kini seharusnya lebih bersedia untuk menangani masalah berkaitan URL asas dalam Vue.js! Sama ada anda sedang mengusahakan projek baharu atau mengekalkan beberapa kod warisan, ingat – memahami asas alatan anda akan sentiasa memberi anda kelebihan.
