Javisst här får du,
Vid programmering är det avgörande att förstå vad bas-URL är; det är roten till var alla rutter i vår applikation finns. I Vue.js, ett av de mest populära JavaScript-ramverken, blir denna idé särskilt viktig vid routing. I den här artikeln kommer vi att fokusera på hur man får bas-URL i Vue.js.
Vue.js är ett progressivt JavaScript-ramverk som är lättillgängligt för användare. Även om det är otroligt kraftfullt för att bygga ensidiga applikationer, möter utvecklare ofta vissa utmaningar. En av dessa kan vara att få tag på bas-URL:en.
let baseUrl = window.location.host; let protocol = window.location.protocol;
Förstå koden ovan
I JavaScript-kodavsnittet ovan anropar vi i huvudsak värd- och protokollegenskaperna för objektet window.location. Detta objekt är ganska användbart eftersom det kan användas för att få den aktuella sidadressen (URL) och för att omdirigera webbläsaren till en ny sida.
window.location.host returnerar värdnamnet (domännamn) och porten (om det finns en) för en webbsida, och window.location.protocol returnerar webbprotokollet som används (http:// eller https://). Kombinera dessa två och du har din bas-URL.
Detaljerad uppdelning av koden
Window - objektet representerar ett öppet fönster i en webbläsare. Det skapas automatiskt av webbläsaren när sidan laddas. Window.location, eller helt enkelt location-objektet, kan användas för att hämta information om den aktuella sidadressen (URL) och för att omdirigera webbläsaren till en ny sida.
let baseUrl = protocol + "//" + baseUrl;
Här sammanfogar vi protokollet (som vi har fått med hjälp av window.location.protocol), två snedstreck och baseUrl (som vi fick med hjälp av window.location.host) tillsammans för att bilda vår bas-URL i Vue.js.
Relaterade bibliotek och funktioner
Vue Router är den officiella routern för Vue.js. Den fungerar utmärkt med Vue.js-ekosystemet och gör det enkelt att bygga ensidiga applikationer med Vue.js. Vue Router har en base-egenskap i sin konstruktor där du kan ange bas-URL:en för alla rutter.
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
Återigen, med hjälp av process.env.BASE_URL kan du ange bas-URL:en för din applikation på ett mer abstrakt sätt om du redan använder Vue Router.
Slutsats
I den här artikeln fördjupade vi oss i konceptet med en bas-URL, varför den behövs och hur den kan erhållas i en Vue.js-applikation. Vi tittade också på Vue-routern och hur man använder den för att ställa in basadressen. Dessa lösningar är särskilt praktiska när man hanterar ensidiga applikationer i Vue.js-ramverket.
Med dessa i din verktygslåda bör du nu vara bättre rustad att hantera grundläggande URL-relaterade problem i Vue.js! Oavsett om du arbetar med ett helt nytt projekt eller underhåller någon äldre kod, kom ihåg – att förstå grunderna för dina verktyg kommer alltid att ge dig ett försprång.
