客戶端 vs. 服務端路由
服務端路由指的是服務器根據用(yòng)戶訪問的 URL 路徑返回不同的響應結果。當我們在一個傳統的服務端渲染的 web 應用(yòng)中點擊一個鏈接時(shí)，浏覽器會(huì)從(cóng)服務端獲得全新的 HTML，然後重新加載整個頁面。
然而，在單頁面應用(yòng)中，客戶端的 JavaScript 可以攔截頁面的跳轉請(qǐng)求，動态獲取新的數據，然後在無需重新加載的情況下(xià)更新當前頁面。這(zhè)樣通常可以帶來(lái)更順滑的用(yòng)戶體驗，尤其是在更偏向“應用(yòng)”的場景下(xià)，因爲這(zhè)類場景下(xià)用(yòng)戶通常會(huì)在很(hěn)長的一段時(shí)間中做出多次交互。
在這(zhè)類單頁應用(yòng)中，“路由”是在客戶端執行的。一個客戶端路由器的職責就是利用(yòng)諸如 History API 或是 hashchange 事(shì)件這(zhè)樣的浏覽器 API 來(lái)管理(lǐ)應用(yòng)當前應該渲染的視(shì)圖。
官方路由
在 Vue School 上(shàng)觀看(kàn)免費的視(shì)頻課程
Vue 很(hěn)适合用(yòng)來(lái)構建單頁面應用(yòng)。對(duì)于大(dà)多數此類應用(yòng)，都推薦使用(yòng)官方支持的路由庫。要了(le)解更多細節，請(qǐng)查看(kàn) Vue Router 的文(wén)檔。
從(cóng)頭開(kāi)始實現(xiàn)一個簡單的路由
如果你(nǐ)隻需要一個簡單的頁面路由，而不想爲此引入一整個路由庫，你(nǐ)可以通過動态組件的方式，監聽浏覽器 hashchange 事(shì)件或使用(yòng) History API 來(lái)更新當前組件。
下(xià)面是一個簡單的例子：
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>
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發