客戶端 vs. 服務端路由
服務端路由指的是服務器根據用戶訪問(wèn)的 URL 路徑返回不同的響應結果。當我們在一(yī)個傳統的服務端渲染的 web 應用中點擊一(yī)個鏈接時(shí)，浏覽器會從(cóng)服務端獲得全新的 HTML，然後重新加載整個頁面。
然而，在單頁面應用中，客戶端的 JavaScript 可(kě)以攔截頁面的跳(tiào)轉請(qǐng)求，動态獲取新的數(shù)據，然後在無需重新加載的情況下(xià)更新當前頁面。這(zhè)樣通(tōng)常可(kě)以帶來更順滑的用戶體驗，尤其是在更偏向“應用”的場景下(xià)，因為(wèi)這(zhè)類場景下(xià)用戶通(tōng)常會在很(hěn)長(cháng)的一(yī)段時(shí)間(jiān)中做(zuò)出多次交互。
在這(zhè)類單頁應用中，“路由”是在客戶端執行(xíng)的。一(yī)個客戶端路由器的職責就是利用諸如(rú) History API 或是 hashchange 事件這(zhè)樣的浏覽器 API 來管理應用當前應該渲染的視(shì)圖。
官方路由
在 Vue School 上(shàng)觀看(kàn)免費(fèi)的視(shì)頻(pín)課程
Vue 很(hěn)适合用來構建單頁面應用。對于大多數(shù)此類應用，都(dōu)推薦使用官方支持的路由庫。要(yào)了(le)解更多細節，請(qǐng)查看(kàn) Vue Router 的文檔。
從(cóng)頭開(kāi)始實現一(yī)個簡單的路由
如(rú)果你隻需要(yào)一(yī)個簡單的頁面路由，而不想為(wèi)此引入一(yī)整個路由庫，你可(kě)以通(tōng)過動态組件的方式，監聽浏覽器 hashchange 事件或使用 History API 來更新當前組件。
下(xià)面是一(yī)個簡單的例子：
vue
<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
'/': Home,
'/about': About
}
export default {
data() {
return {
currentPath: window.location.hash
}
},
computed: {
currentView() {
return routes[this.currentPath.slice(1) || '/'] || NotFound
}
},
mounted() {
window.addEventListener('hashchange', () => {
this.currentPath = window.location.hash
})
}
}
</script>
<template>
<a href="#/">Home</a> |
<a href="#/about">About</a> |
<a href="#/non-existent-path">Broken Link</a>
<component :is="currentView" />
</template>
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發