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 這個插件碰到了這個情況。