你知道前端單頁面路由是怎么實現的嗎？

wthee 發布于2019-08-23 15:21 / 1792人閱讀

摘要：出于安全的考慮，開發人員無法得知用戶瀏覽過的。這個方法接受一個參數，表示向后或向前跳轉的頁面數的一個整數值。該事件觸發時，該對象會傳入回調函數。假定當前網頁是。顯示為顯示為顯示為顯示為顯示為顯示為三事件事件是對象上的事件，配合和方法使用。

首先要學習一下history對象，history對象保存著用戶的上網記錄，從瀏覽器窗口打開的那一刻算起。出于安全的考慮，開發人員無法得知用戶瀏覽過的URL。不過，借由用戶訪問過的頁面列表，同樣可以在不知道實際URL的情況下實現后退與前進

一、history對象的方法 go(Stirng|number)

使用go方法可以在用戶的歷史記錄中任意跳轉，可以向后也可以向前。這個方法接受一個參數，表示向后或向前跳轉的頁面數的一個整數值。負數表示向后跳轉(類似瀏覽器的后退按鈕)，正數表示向前跳轉(類似瀏覽器的前進按鈕)。來看下例子

//后退一頁
history.go(-1)

//前進一頁
history.go(1)

//前進兩頁
history.go(2)

也可以給go()方法船體一個字符串參數，此時瀏覽器會跳轉到歷史記錄中包含改字符串的第一個位置，可能后退也可能前進，具體要看哪一個位置最近。如果歷史記錄中不包含該字符串，則什么都不做。例如：

//跳轉到最近的wrox.com頁面
history.go("wrox.com")

//跳轉到最近的douban.cn頁面
history.go("douban.cn")

back()和forward

這兩個方法可以來代替go()，模仿瀏覽器的后退和前進功能

back()相當于 go(-1) 后退一個頁面

forward相當于go(1) 前進一個頁面

注：接下來幾個方法是html5新增的方法

二、html5中history新增的方法 pushState(state,title,url)

該方法的作用是在歷史記錄中新增一條記錄，改變瀏覽器地址欄的url,但是，不刷新頁面。

pushState對象接受三個參數，

state：一個與添加的記錄相關聯的狀態對象，主要用于popstate事件。該事件觸發時，該對象會傳入回調函數。也就是說，瀏覽器會將這個對象序列化以后保留在本地，重新載入這個頁面的時候，可以拿到這個對象。如果不需要這個對象，此處可以填null。

title：新頁面的標題。但是，現在所有瀏覽器都忽視這個參數，所以這里可以填空字符串。

url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

舉個例子，假設當前網址是hello.com/1.html,使用puchState()方法在瀏覽記錄中添加一個新紀錄

var stateObj={foo:"bar"}
history.pushState(starteObj,"","2.html")

添加新紀錄后，瀏覽器的地址欄立刻顯示`hello.com/2.html,但不會跳轉到2.html,也不會檢查2.html是否存在，它只是成為瀏覽歷史中的最新記錄。

總之，pushState()方法不會觸發頁面刷新，只是導致history對象發生變化，地址欄會有反應，使用該方法后，就可以使用history.state屬性讀出狀態對象

var stateObj={foo:"bar"}
history.pushState(starteObj,"","2.html")
history.state //=> {foo:"bar"}

注意：如果pushState的URL參數設置了一個新的hash值，并不會觸發hashchange事件。

replaceState(state,title,url)

replaceState方法的作用是替換當前的歷史記錄，其他的都與pushState()方法一模一樣。

假定當前網頁是example.com/example.html。

history.pushState({page: 1}, "title 1", "?page=1")
// URL 顯示為 http://example.com/example.html?page=1

history.pushState({page: 2}, "title 2", "?page=2");
// URL 顯示為 http://example.com/example.html?page=2

history.replaceState({page: 3}, "title 3", "?page=3");
// URL 顯示為 http://example.com/example.html?page=3

history.back()
// URL 顯示為 http://example.com/example.html?page=1

history.back()
// URL 顯示為 http://example.com/example.html

history.go(2)
// URL 顯示為 http://example.com/example.html?page=3

三、popstate事件

popstate事件是window對象上的事件，配合pushState()和replaceState()方法使用。當同一個文檔(可以理解為同一個網頁，不能跳轉，跳轉了就不是同一個網頁了)的瀏覽歷史出現變化時，就會觸發popstate事件。

上面我們說過，調用pushState()或者replaceState()方法都會改變當前的歷史記錄，僅僅調用pushState()方法或replaceState()方法，并不會觸發該事件，另外一個條件是用戶必須點擊瀏覽器的倒退按鈕或者前進按鈕，或者使用js調用history.back()或者history.forward()等方法。

所以，記住popstate事件觸發的條件

1. 處在同一個文檔(同一個html頁面)
2. 文檔的瀏覽歷史(即history對象)發生改變

只要符合這兩個條件，popstate事件就會觸發

具體例子

//index.html

先點擊pushState按鈕，在點擊后退按鈕，就會觸發popstate事件

再來一個例子

//index.html

    


    #one

直接點擊a標簽,也可以觸發popstate事件

四、瀏覽器兼容性

圖片來自mdn傳送門

五、單頁面路由原理

前端路由的本質是監聽 URL 的變化，然后匹配路由規則，顯示相應的頁面，并且無須刷新。

目前單頁面使用的路由就只有兩種實現方式

hash模式

history模式

hash模式

www.test.com/##/就是Hash URL,當##后面的哈希值發生變化時，不會向服務器請求數據，可以通過hashchange事件來監聽到URL的變化，從而進行跳轉頁面

網上偷來的一張圖：

history模式

history模式相比hash模式更美觀，需要用到Html5新增的幾個api實現，原理如下：

繼續偷圖：

五、實例，使用history api實現簡單的單頁面路由

在介紹實例前先介紹下location對象，location對象提供了與當前窗口中加載的文檔有關的信息。它包含以下屬性：

屬性名	例子	說明
host	www.hello.com:8080	返回服務器名稱和端口號(如果有的話)
hostname	www.hello.com	返回服務器名稱，不帶端口號
href	http://www.hello.com	返回當前加載頁面的完整url
pathname	/user/ming	返回url中的目錄
hash	#content	返回url中的hash,如果沒有返回空字符串
search	?q=javascript	返回Url的查詢字符串，這個字符串以問號開頭

我們在下方的示例中需要用到pathname屬性拿到訪問的路徑

一個簡單的history模式單頁面路由實現如下：

//1. 路由規則
const routes={
    "/user":user, //user是引入的視圖   import user from "./view/user" 
    "/about":about
}
//2. 路由控制類
class Router {
  start() {
    // 點擊瀏覽器后退/前進按鈕時會觸發window.onpopstate事件, 我們在這時切換到相應頁面
    // https://developer.mozilla.org/en-US/docs/Web/Events/popstate
    window.addEventListener("popstate", () => {
      this.load(location.pathname)
    })

    // 打開頁面時加載當前頁面 在單頁面入口文件中要調用start方法
    this.load(location.pathname)
  }

  // 前往path, 變更地址欄URL, 并加載相應頁面
  go(path) {
    // 變更地址欄URL
    history.pushState({}, "", path)
    // 加載頁面
    this.load(path)
  }

  // 加載path路徑的頁面
  load(path) {
    // 首頁
    if (path === "/") path = "/foo"
    // 創建頁面實例
    const view = new routes[path]()
    // 調用頁面方法, 把頁面加載到document.body中
    view.mount(document.body)
  }
}

Router類的作用是控制頁面根據當前Url切換

start()

作用1：監聽onpopstate事件，在瀏覽器前進或后退時加載相應的頁面

作用2：打開頁面時加載當前頁面,需要在單頁面的入口文件引入，并執行

go(path)

跳轉到path對應的頁面

load(path)

加載path路徑的頁面

參考鏈接

高程三 p215(history對象) p207(location對象)

JavaScript標準參考教程-阮一峰

interviewMap

GPU云服務器云服務器有你短信是免費的嗎你知道你應該知道數據分析知道你

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101909.html

vue 248+個知識點（面試題）為你保駕護航

摘要：要招一個會的開發者作為面試官的你，你還會每次都只是問這些老土的問題嗎你對的理解是什么你知道什么是雙向綁定嗎你了解它的原理嗎說說的生命周期有哪些組件通訊有哪些你用過嗎作為面試者的你，在網上搜索下面試題及答案，看完后你是不是覺得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一個會vue的開發者： ...

snowell 2019-08-23 18:22 評論0 收藏0
比官方文檔更易懂的Vue.js教程！包你學會！

摘要：目前專注前端圖片優化與新技術的探研。還有一點必須要知道的是，是國人寫的，技術文檔也妥妥的是中文，想到這我就有學習的動力。注意到，等都是頁面也可以是組件，接著注冊路由器，然后開始配置路由。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由蔡述雄發表于云+社區專欄蔡述雄，現騰訊用戶體驗設計部QQ空間高級UI工程師。智圖圖片優化系統首席工程師，曾參與《眾妙之門》書籍的翻譯工...

DandJ 2019-08-23 12:07 評論0 收藏0
2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

JeOam 2019-08-02 14:28 評論0 收藏0
2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

QLQ 2019-08-26 13:33 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0