更新時間:2022-01-10 來源:黑馬程序員 瀏覽量:
SPA 與前端路由
SPA 指的是一個 web 網(wǎng)站只有唯一的一個 HTML 頁面,所有組件的展示與切換都在這唯一的一個頁面內(nèi)完成。
此時,不同組件之間的切換需要通過前端路由來實現(xiàn)。
結(jié)論:在 SPA 項目中,不同功能之間的切換,要依賴于前端路由來完成!
前端路由的工作方式
①用戶點擊了頁面上的路由鏈接
②導致了 URL 地址欄中的 Hash 值發(fā)生了變化
③前端路由監(jiān)聽了到 Hash 地址的變化
④前端路由把當前 Hash 地址對應的組件渲染都瀏覽器中
實現(xiàn)簡易的前端路由
步驟1:導入并注冊MyHome、MyMovie、MyAbout 三個組件。示例代碼如下:
import MyHome from './components/MyHome.vue' import MyMovie from './components/MyMovie.vue' import MyAbout from './components/MyAbout.vue' export default { components: { MyHome, MyMovie, MyAbout, }, }
步驟2:通過標簽的is 屬性,動態(tài)切換要顯示的組件。示例代碼如下:
< template > < h1 > App 組件 < /h1> < component: is = "comName" > < /component> < /template> export default t data() { return { comName: 'my-home', //要展示的組件的名稱 } }, }
步驟3:在組件的結(jié)構(gòu)中聲明如下3 個鏈接,通過點擊不同的鏈接,切換瀏覽器地址欄中的Hash 值
<a href="#/home">Home</a> <a href="#/movie">Movie</a> <a href="#/about">About</a>
步驟4:在created生命周期函數(shù)中監(jiān)聽瀏覽器地址欄中Hash 地址的變化,動態(tài)切換要展示的組件的名稱:
created() { windoiufonhashchange = () => { switch (location.hash) { case '#/home': //點擊了“首頁“的鏈接 this.comName = 'my-home' break case '#/movie': //點擊了“電影”的鏈接 this.comName = 'my-movie' break case '#/about': //點擊了“關(guān)于”的鏈接 this.comName = 'my-about' break } } }