●前端路由

●路由: 就是一一對應(yīng)關(guān)系的集合
●前端路由: 就是一個 url 地址, 對應(yīng)哪個組件(頁面)
●前端路由的本質(zhì)
○根據(jù)地址欄變化(不重新想服務(wù)器發(fā)送請求), 去局部更新不同的頁面內(nèi)容, 完成前端業(yè)務(wù)場景切換
●前端路由的思路
○URL 地址欄中的 Hash 值發(fā)生了變化
○前端 JS 監(jiān)聽到 Hash 地址的變化 window.onhashchange = () => {}
○前端 JS 把當前 Hash 地址對應(yīng)的組件渲染到瀏覽器中
●SPA
○ 單頁面應(yīng)用 (single page application)
○就是只有一張 Web 頁面的應(yīng)用, 是加載單個 HTML 頁面并在用戶與應(yīng)用程序交互時, 動態(tài)更新該頁面的 Web 應(yīng)用程序
簡單實現(xiàn)

●當前所有的 展示內(nèi)容, 都書寫在了 這個 HTML 文件中, 這種寫法在簡單案例中沒有什么不妥, 但是如果在實際開發(fā)中肯定不好
●因為每一個 展示的內(nèi)容代碼量都可能有很多, 所以放在一個文件內(nèi)部會影響閱讀體驗, 所以我們可以將代碼重新整理調(diào)整一下結(jié)構(gòu)
代碼結(jié)構(gòu)調(diào)整
●SPA/components/templateA.js

●SPA/components/templateB.js

●SPA/components/templateC.js

● SPA/components/templateD.js

●SPA/router.js

●SPA/index.js

●SPA/index.

路由重定向
●路由重定向
○ 我們當前的的單頁應(yīng)用整體沒什么大問題, 但是有一個小問題是首次進入頁面的時候, 渲染區(qū)沒有內(nèi)容展示
○我們的解決方式也很簡單, 就是在首次進入的時候, 將我們的路由重定向到 '/pageA'
○這樣的話我們在首次進入頁面的時候就能夠展示出對應(yīng)的內(nèi)容
?SPA/index.js

?SPA/router.js

懶加載
●現(xiàn)在的問題是在我們當前的完成方式中
○首先會去運行 index.html
○運行時會以模塊化的方式引入 index.js
○在 index.js 中, 我們我們在代碼開始, 導(dǎo)入了 router.js
○此時引入導(dǎo)入的特性, 會將 router.js 中的代碼全都執(zhí)行一次
○而在 router.js 中, 我們又導(dǎo)入了 components 中的 四個文件
○所以也會把這四個文件的內(nèi)容全都執(zhí)行一遍, 哪怕有些文件在首次執(zhí)行的時候并沒有使用到
●所以此時出現(xiàn)了一個問題
○假如我 router.js 中有 200 個文件, 而我首次渲染的時候只用到了其中一個
○但是我們現(xiàn)在的寫法, 在首次運行時仍然會將我 沒用到的那 199 個文件, 都運行一遍
○有一種更好的方式就是我用到了什么文件, 你再加載什么文件即可, 所以我們現(xiàn)在需要使用 "懶加載" 來解決
●換句話說, 懶加載其實就是, 用到了那個文件, 我在加載那個文件, 而不是在開始的時候, 一股腦的全加載完
●方式也很簡單, 我們首先是需要調(diào)整一下引入的方式
○語法; import('地址')
○注意: 這種引入方式是按照 promise 的語法封裝的函數(shù)
○返回值: 因為使用 promise 封裝的, 所以他的返回值不是我們默認導(dǎo)出的內(nèi)容, 而是一個 promise 對象
○所以我們的 index.js 也需要適當?shù)恼{(diào)整

?SPA/router.js

?SPA/index.js