Vue路由原理

模式：

hash路由的關鍵在於：在router-link中，呼叫window.location.hash改變頁面的hash值，然後在router-view中在window物件上監聽hashchange事件。

router-link:

<

template
>
<
div>
<
span 
@click
="jump"
>
<
slot
>
slot
>
span
>
div>
template
>
<
script
>
export 
default
}}script
>

router-view:

<

template
>
<
div>
<
component 
:is='componentid'
>
component
>
div>
template
>
<
script
>
import recommend from 
'../components/recommend
'import singer from 
'../components/singer
'import rank from 
'../components/rank
'export 
default
), components: ,
created () ,,]
window.addeventlistener(
'hashchange
', () 
=>
})})
}}script
>

history路由的關鍵在於：h5 history新增了兩個api:history.pushstate和history.replacestate

兩個api都接受3個引數

以及在router-view中監聽popstate事件

當活動歷史記錄條目更改時，將觸發popstate事件。

需要注意的是呼叫history.pushstate()或history.replacestate()不會觸發popstate事件，只有在做出瀏覽器動作時，才會觸發該事件，如使用者點選瀏覽器的回退按鈕。

router-link關鍵**：

jump()

router-view關鍵**：

window.addeventlistener('popstate', () => 

})})

其餘**與hash路由示例一樣

當然這裡只是簡單的攤訴了路由的實現原理，如果要深入了解vue的路由實現機制的可以檢視vue的原始碼。

參考：

Vue路由原理

知道路由的方便之處下面是它兩種模式的原理 預設是hash hash 通過位址列進行切換 不利於搜尋引擎優化 首先他利用了瀏覽器對於hash這種當時不進行重新整理，然後通過hashchange監聽hash的改變來進行dom的重新渲染，改變元件引進乙個新元件 function render window...

vue路由實現原理

路由需要實現的功能 1.改變url且不讓瀏覽器向伺服器發出請求 2.監測 url 的變化 3.截獲 url 位址，並解析出需要的資訊來匹配路由規則。前端目前只有2種模式 1.hash模式 ie8 用a標籤或者window.location.hash設定雜湊值。window.addeventliste...

vue路由或者前端路由的實現原理

1 利用h5中的history api 實現 主要利用history.pushstatae和history.replacestate來實現，不同之處在於，pushstate會增加一條新的歷史記錄，而replacestate則會替換當前的歷史記錄，並且再用該方法發布專案時，還需配置一下apache。2...