GitHub Pages 如何實現 SPA

時間 2019-11-08

標籤 github pages 如何實現 spa 欄目 Git 简体版

原文原文鏈接

前因

這兩天在 GitHub Pages 裏面託管了一個小 DEMO，可是 DEMO 是 SPA 的，然而 GitHub Pages 是沒法支持 SPA 配置的，這裏記錄一下解決方案。javascript

404

GitHub Pages 雖然不支持 SPA，可是支持自定義 404 頁面。參考：GitHub Pages 404。html

You can display a custom 404 error page when people try to access nonexistent pages on your site.vue

經過建立一個 404.html（或者 404.md，不過須要作一些配置，具體可查看上方連接），訪問不存在的頁面都會跳轉到 404 的頁面。java

初次方案

既然可使用 404 頁面捕獲不存在的頁面請求，那麼就能夠 藉助 404 頁面進行跳轉。git

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>404</title>
        <script> // 或者特定的路徑 location.href = location.origin; </script>
    </head>
    <body></body>
</html>
複製代碼

藉助 404 頁面，可讓全部頁面跳轉到 index 中，算是簡單的實現了 SPA。github

進階方案

雖然實現了 404 到 index 的跳轉，可是離真正的 SPA 體驗仍是差了，每次進入頁面只能跳轉到首頁。api

差的就是 跳到 index 可是路由信息卻丟失了，這時候能夠想到想辦法保存下跳轉前的路由信息，而後跳轉後還原就能夠了。大概步驟以下：瀏覽器

在 404 頁面，將當前的路由信息記錄下來
攜帶路由信息跳轉到 index
進入 index 後檢查路由信息，進行還原

404.html網站

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>404</title>
        <script> location.href = location.origin + '/?page=' + encodeURIComponent(location.href.replace(location.origin, '')); </script>
    </head>
    <body></body>
</html>
複製代碼

index.htmlui

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <script> (function() { if (location.search) { var params = {}; location.search .replace(/^\?/, '') .split('&') .forEach(s => { var v = s.split('='); params[v[0]] = v[1]; }); if (params.page) { history.replaceState(null, null, decodeURIComponent(params.page)); } } })(); </script>
    </head>
    <body><script type="text/javascript" src="main.min.js"></script></body>
</html>
複製代碼

經過上述步驟能夠將路由信息完整的帶到 index 中還原，從而實現 SPA 的效果，固然，會看到瀏覽器地址欄中路由的跳轉，體驗上稍微差了點，不過功能上已經基本無異。

最終效果

能夠看下效果：

網站地址：rapiop.github.io/vue/

GitHub 地址：github.com/rapiop/rapi…

注意事項

大部分 GitHub Pages 有本身的項目路徑，如 test.github.io/test/，這時候須要對上述邏輯作一些處理，不能直接套用。
URL 參數中的 page 能夠自定義，注意不要和已有路由信息衝突。
除了 URL 傳參，也能夠經過 localStorage 之類的手段傳遞路由，不過極小機率會有問題，好比 404 頁面還沒跳轉時關閉了頁面，下一次到首頁打開可能會跳到以前存儲的路由中去之類的。

參考

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。