vue-router 跳轉原理

vue-router路由的原理是經過改變網址,來實現頁面的局部刷新,相比a標籤跳轉的不一樣之處在於,路由跳轉不須要刷新整個頁面。

大概流程能夠當作:

　　1. 瀏覽器發出請求

　　2.服務器監聽到端口有請求過來,並解析url路徑

　　3.根據服務器的路由配置,返回相應的信息(能夠是HTML字符串、也能夠是json數據、圖片等等)

　　4.瀏覽器根據數據包的 Content-type 來決定如何解析數據

簡單來講路由就是用來跟後端服務器進行交互的一種方式，經過不一樣的路徑，來請求不一樣的資源，請求不一樣的頁面是路由的其中一種功能。

 

前端的路由

hash模式

隨着 ajax 的流行，異步數據請求交互運行在不刷新瀏覽器的狀況下進行。而異步交互體驗的更高級版本就是 SPA —— 單頁應用。單頁應用不單單是在頁面交互是無刷新的，連頁面跳轉都是無刷新的，爲了實現單頁應用，因此就有了前端路由。
相似於服務端路由，前端路由實現起來其實也很簡單，就是匹配不一樣的 url 路徑，進行解析，而後動態的渲染出區域 html 內容。可是這樣存在一個問題，就是 url 每次變化的時候，都會形成頁面的刷新。那解決問題的思路即是在改變 url 的狀況下，保證頁面的不刷新。在 2014 年以前，你們是經過 hash 來實現路由，url hash 就是相似於：

http://www.xxx.com/#login

這種 #。後面 hash 值的變化，並不會致使瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發hashchange 這個事件，經過這個事件咱們就能夠知道 hash 值發生了哪些變化。而後咱們即可以監聽hashchange來實現更新頁面部份內容的操做：

function matchAndUpdate () {
  // todo 匹配 hash作 dom 更新操做  
}
window.addEventListener('hashchange',matchAndUpdate )
// addEventListener() 方法用於向指定元素添加事件句柄。

 

Hash 方法是在路由中帶有一個 #，主要原理是經過監聽 # 後的 URL 路徑標識符的更改而觸發的瀏覽器 hashchange 事件，而後經過獲取 location.hash 獲得當前的路徑標識符，再進行一些路由跳轉的操做，參見 MDN

1. location.href：返回完整的 URL
2. location.hash：返回 URL 的錨部分
3. location.pathname：返回 URL 路徑名
4. hashchange 事件：當 location.hash 發生改變時，將觸發這個事件

好比訪問一個路徑  http://sherlocked93.club/base/#/page1，那麼上面幾個值分別爲：

# http://sherlocked93.club/base/#/page1
{
  "href": "http://sherlocked93.club/base/#/page1",
  "pathname": "/base/",
  "hash": "#/page1"
}

注意： Hash 方法是利用了至關於頁面錨點的功能，因此與原來的經過錨點定位來進行頁面滾動定位的方式衝突，致使定位到錯誤的路由路徑，所以須要採用別的辦法，以前在寫 progress-catalog 這個插件碰到了這個狀況。