spa是一種網路應用程式或**的模型，它通過動態重寫當前頁面來與使用者互動，這種方法避免了頁面之間切換打斷使用者體驗
在單頁應用中，所有必要的**（html、j**ascript和css）都通過單個頁面的載入而檢索，或者根據需要（通常是為響應使用者操作）動態裝載適當的資源並新增到頁面
舉個例子來講就是乙個杯子，早上裝的牛奶，中午裝的是開水，晚上裝的是茶，我們發現，變的始終是杯子裡的內容，而杯子始終是那個杯子
結構如下圖
我們熟知的js框架如react,vue,angular,ember都屬於spa
二、spa和mpa的區別
上面大家已經對單頁面有所了解了，下面來講講多頁應用
在mpa中，每個頁面都是乙個主頁面，都是獨立的
如下圖
單頁應用與多頁應用的區別
單頁面應用（spa）
多頁面應用（mpa）
組成乙個主頁面和多個頁面片段
多個主頁面
重新整理方式
區域性重新整理
整頁重新整理
url模式
雜湊模式
歷史模式
seo搜尋引擎優化
難實現，可使用ssr方式改善
容易實現
資料傳遞
容易通過url、cookie、localstorage等傳遞
頁面切換
速度快，使用者體驗良好
切換載入資源，速度慢，使用者體驗差
維護成本
相對容易
相對複雜
單頁面應用（spa） 多頁面應用（mpa）
組成 乙個主頁面和多個頁面片段 多個主頁面
重新整理方式 區域性重新整理 整頁重新整理
url模式 雜湊模式 歷史模式
seo搜尋引擎優化 難實現，可使用ssr方式改善 容易實現
資料傳遞 容易 通過url、cookie、localstorage等傳遞
頁面切換 速度快，使用者體驗良好 切換載入資源，速度慢，使用者體驗差
維護成本 相對容易 相對複雜
單頁應用優缺點
優點：具有桌面應用的即時性、**的可移植性和可訪問性
良好的前後端分離，分工更明確
缺點：不利於搜尋引擎的抓取
首次渲染速度相對較慢
三、實現乙個spa
原理監聽位址列中hash變化驅動介面變化
用pushsate記錄瀏覽器的歷史，驅動介面傳送變化
實現hash 模式
核心通過監聽url中的hash來進行路由跳轉
//history模式定義 router
class router ; //
存放路由path及callback
this.currenturl = '';
//監聽路由change呼叫相對應的路由**
window.addeventlistener('load', this.refresh, false
);window.addeventlistener('hashchange', this.refresh, false);}
route(path, callback)
push(path) }//
使用 router
window.minirouter = new
router();
minirouter.route('/', () => console.log('page1'))
minirouter.route('/page2', () => console.log('page2'))
minirouter.push('/') //
page1
minirouter.push('/page2') //
page2
history 模式核心借用 html5 history api，api 提供了豐富的 router 相關屬性
先了解乙個幾個相關的api
history.pushstate 瀏覽器歷史紀錄新增記錄
history.replacestate修改瀏覽器歷史紀錄中當前紀錄
history.popstate 當 history 發生變化時觸發
//四、題外話：如何給spa做seo定義 router
class router ;
this
.listerpopstate()
}init(path) ,
null
, path);
this.routes[path] && this
.routes[path]();
}route(path, callback)
push(path) ,
null
, path);
this.routes[path] && this
.routes[path]();
}listerpopstate () )}}
//使用 router
window.minirouter = new
router();
minirouter.route('/', ()=> console.log('page1'))
minirouter.route('/page2', ()=> console.log('page2'))
//跳轉
minirouter.push('/page2') //
page2
下面給出基於vue的spa如何實現seo的三種方式
ssr服務端渲染
將元件或頁面通過伺服器生成html，再返回給瀏覽器，如nuxt.js
靜態化目前主流的靜態化主要有兩種：
（1）一種是通過程式將動態頁面抓取並儲存為靜態頁面，這樣的頁面的實際存在於伺服器的硬碟中
（2）另外一種是通過web伺服器的 url rewrite的方式，它的原理是通過web伺服器內部模組按一定規則將外部的url請求轉化為內部的檔案位址，一句話來說就是把外部請求的靜態位址轉化為實際的動態頁面位址，而靜態頁面實際是不存在的。這兩種方法都達到了實現url靜態化的效果
使用phantomjs針對爬蟲處理
原理是通過nginx配置，判斷訪問**是否為爬蟲，如果是則搜尋引擎的爬蟲請求會**到乙個node server，再通過phantomjs來解析完整的html，返回給爬蟲。
下面是大致流程圖
單頁應用SPA 多頁應用MPA
spa單頁應用 第一次進入頁面的時候會請求乙個html檔案，重新整理清除一下。切換到其他元件，此時路徑也相應變化，但是並沒有新的html檔案請求，頁面內容也變化了。原理是 js會感知到url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然後將下乙個頁面的內容掛載到當前頁面上，這個時候的...
SPA 單頁面應用 單頁Web應用
正常網頁url的組成,可以請看location 物件 包含有關當前 url 的資訊。例如 如上的 url 由以下部分組成 1 https 規定了頁面採用的協議 2 mp.csdn.net 為頁面所屬的網域名稱 3 postedit index.html為讀取的檔名稱 也可以叫做入口檔案 4 name...
單頁應用（SPA）和 多頁應用（MPA）
第一次進入頁面的時候會請求乙個html檔案，重新整理清除一下。切換到其他元件，此時路徑也相應變化，但是並沒有新的html檔案請求，頁面內容也變化了。原理 js會感知到url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然後將下乙個頁面的內容掛載到當前頁面上，這個時候的路由不是後端來做了...