vue router 是vue官方的路由管理器。它和 vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。vue-router預設 hash 模式，還有一種是history模式。
hash模式的工作原理是hashchange事件，可以在window監聽hash的變化。我們在url後面隨便新增乙個#xx觸發這個事件。
window.onhashchange = function(event)可以看到裡邊有兩個屬性newurl和oldurl。可以通過模擬改變hsh的值，動態頁面資料。
儘管瀏覽器沒有請求伺服器，但是頁面狀態和url已經關聯起來了，這就是所謂的前端路由，單頁應用的標配。
把window.history物件列印出來可以看到裡邊提供的方法和記錄長度
前進，後退，跳轉操作方法：
history.go(-3);//後退3次
history.go(2);//前進2次
history.go(0);//重新整理當前頁面
history.back(); //後退
history.forward(); //前進
a)history.pushstate(data, title [, url])：往歷史記錄堆疊頂部新增一條記錄； data會在onpopstate事件觸發時作為
引數傳遞過去；title為頁面標題，當前所有瀏覽器都會 忽略此引數；url為頁面位址，可選，預設為當前頁位址；
b)history.replacestate(data, title [, url]) ：更改當前的歷史記錄，引數同上；
c)history.state：用於儲存以上方法的data資料，不同瀏覽器的讀寫許可權不一樣；
d)window.onpopstate：響應pushstate或replacestate的呼叫；有了這幾個新的api，針對支援的瀏覽器，
我們可以構建使用者體驗更好的應用了。就像剛提到的facebook相簿，雖然是ajax的方式，但使用者可以直接復 制頁面位址分享給好友，
const router = new vuerouter()不過這種模式要玩好，還需要後台配置支援。因為我們的應用是個單頁客戶端應用，如果後台沒有正確的配置，當使用者在瀏覽器直接訪問就會返回 404，這就不好看了。
給個警告，因為這麼做以後，你的伺服器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回index.html檔案。為了避免這種情況，你應該在 vue 應用裡面覆蓋所有的路由情況，然後在給出乙個 404 頁面。
const router = new vuerouter(
]})
vue router的兩種模式
hash模式的工作原理是onhashchange事件,通過window.location.hash訪問 window.onhashchange function 由於hash發生變化的url都會被瀏覽器記錄，雖然瀏覽器沒有請求伺服器，但頁面狀態和url關聯起來了。這就是前端路由 更新檢視但不會重新請...
vue router的兩種模式的區別
優點 良好的互動體驗,使用者不需要重新整理頁面,頁面顯示流暢,良好的前後端工作分離模式,減輕伺服器壓力,缺點 不利於seo,初次載入耗時比較多 對於hash模式會建立hashhistory物件,在訪問不同的路由的時候,會發生兩件事 hashhistory.push 將新的路由新增到瀏覽器訪問的歷史的...
vue router的兩種模式的區別
大家都知道vue是一種單頁應用，單頁應用就是僅在頁面初始化的時候載入響應的html css js 優點 良好的互動體驗，使用者不需要重新整理頁面，頁面顯示流暢，良好的前後端工作分離模式，減輕伺服器壓力 缺點 不利於seo，初次載入耗時比較多 通過history api，我們丟掉了醜陋的 但是他有個毛...