資訊專欄INFORMATION COLUMN
摘要：前端路由原理本質(zhì)就是監(jiān)聽的變化，然后匹配路由規(guī)則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現(xiàn)方式就是，當后面的哈希值發(fā)生變化時，不會向服務器請求數(shù)據(jù)，可以通過事件來監(jiān)聽到的變化，從而進行跳轉(zhuǎn)頁面。
前端路由原理本質(zhì)就是監(jiān)聽 URL 的變化，然后匹配路由規(guī)則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現(xiàn)方式
hash
history
www.test.com/##/ 就是 Hash URL，當 ## 后面的哈希值發(fā)生變化時，不會向服務器請求數(shù)據(jù)，可以通過 hashchange 事件來監(jiān)聽到 URL 的變化，從而進行跳轉(zhuǎn)頁面。
vue-router hash實現(xiàn)源碼（完整源碼訪問https://github.com/vuejs/vue-...）：
/**
* 添加 url hash 變化的監(jiān)聽器
*/
setupListeners () {
const router = this.router
/**
* 每當 hash 變化時就解析路徑
* 匹配路由
*/
window.addEventListener("hashchange", () => {
const current = this.current
/**
* transitionTo:
* 匹配路由
* 并通過路由配置，把新的頁面 render 到 ui-view 的節(jié)點
*/
this.transitionTo(getHash(), route => {
replaceHash(route.fullPath)
})
})
}
檢測到 hash 的變化后，就可以通過替換 DOM 的方式來實現(xiàn)頁面的更換。
History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美觀
兩個 API ，pushState和replaceState可以改變 url 地址且不會發(fā)送請求，還有onpopState事件。但因為沒有 # 號，所以當用戶刷新頁面之類的操作時，瀏覽器還是會給服務器發(fā)送請求。為了避免出現(xiàn)這種情況，所以這個實現(xiàn)需要服務器的支持，需要把所有路由都重定向到根頁面。具體可以訪問官網(wǎng)：https://router.vuejs.org/zh/g...
vue-router history實現(xiàn)源碼（完整源碼訪問https://github.com/vuejs/vue-...）
export class HTML5History extends History {
constructor (router, base) {
super(router, base)
/**
* 原理還是跟 hash 實現(xiàn)一樣
* 通過監(jiān)聽 popstate 事件
* 匹配路由，然后更新頁面 DOM
*/
window.addEventListener("popstate", e => {
const current = this.current
// Avoiding first `popstate` event dispatched in some browsers but first
// history route not updated since async guard at the same time.
const location = getLocation(this.base)
if (this.current === START && location === initLocation) {
return
}
this.transitionTo(location, route => {
if (supportsScroll) {
handleScroll(router, route, current, true)
}
})
})
}
go (n) {
window.history.go(n)
}
push (location, onComplete, onAbort) {
const { current: fromRoute } = this
this.transitionTo(location, route => {
// 使用 pushState 更新 url，不會導致瀏覽器發(fā)送請求，從而不會刷新頁面
pushState(cleanPath(this.base + route.fullPath))
onComplete && onComplete(route)
}, onAbort)
}
replace (location, onComplete, onAbort) {
const { current: fromRoute } = this
this.transitionTo(location, route => {
// replaceState 跟 pushState 的區(qū)別在于，不會記錄到歷史棧
replaceState(cleanPath(this.base + route.fullPath))
onComplete && onComplete(route)
}, onAbort)
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101507.html
摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。 一、vue-router 1、簡介 我們經(jīng)常使用vue開發(fā)單頁面應用程序（SPA）。在開發(fā)SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像...
摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。 一、vue-router 1、簡介 我們經(jīng)常使用vue開發(fā)單頁面應用程序（SPA）。在開發(fā)SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 487·2021-11-22 12:05
閱讀 1547·2021-11-17 09:33
閱讀 3594·2021-11-11 16:54
閱讀 2687·2021-10-14 09:49
閱讀 4069·2021-09-06 15:01
閱讀 1837·2019-08-29 17:23
閱讀 711·2019-08-29 14:09
閱讀 730·2019-08-29 12:28
