資訊專欄INFORMATION COLUMN
摘要：顯示為顯示為顯示為單頁面應用用戶訪問軌跡埋點開發過單頁面應用的同學，一定比較清楚，單頁面應用的路由切換是無感知的，不會重新進行請求去獲取頁面，而是通過改變頁面渲染視圖來實現。
前言
最近開發的埋點項目，需要記錄用戶行為軌跡即用戶頁面訪問順序。需要在頁面跳轉的時候，記錄用戶訪問的信息（比如 url ，請求頭部等），非單頁面應用可以給 window 對象加上一個 beforeunload 事件，在頁面離開時觸發采集開關，但是現在很多業務是單頁面應用，用戶切換地址的時候，是無刷新的局部更新，沒有辦法觸發 beforeunload。所以單頁面應用的路由插件一定運用了 window 自帶的，無刷新修改用戶瀏覽記錄的方法，pushState 和 replaceState。
pushState 和 replaceState 了解一下history 提供了兩個方法，能夠無刷新的修改用戶的瀏覽記錄，pushSate，和 replaceState，區別的 pushState 在用戶訪問頁面后面添加一個訪問記錄， replaceState 則是直接替換了當前訪問記錄
history 對象的詳細信息已經有很多很好很詳細的介紹文獻，這里不再做總結，我們引用阮老師的教程介紹，history對象 -- JavaScript 標準參考教程（alpha）
history.pushStatehistory.pushState方法接受三個參數，依次為：
state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填null。
title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。
url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。
假定當前網址是example.com/1.html，我們使用pushState方法在瀏覽記錄（history對象）中添加一個新記錄。
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "2.html");
添加上面這個新記錄后，瀏覽器地址欄立刻顯示 example.com/2.html，但并不會跳轉到 2.html，甚至也不會檢查2.html 是否存在，它只是成為瀏覽歷史中的最新記錄。這時，你在地址欄輸入一個新的地址(比如訪問 google.com )，然后點擊了倒退按鈕，頁面的 URL 將顯示 2.html；你再點擊一次倒退按鈕，URL 將顯示 1.html。
總之，pushState 方法不會觸發頁面刷新，只是導致 history 對象發生變化，地址欄會有反應。
如果 pushState 的 url參數，設置了一個新的錨點值（即hash），并不會觸發 hashchange 事件。如果設置了一個跨域網址，則會報錯。
history.replaceState// 報錯 history.pushState(null, null, "https://twitter.com/hello"); 上面代碼中，pushState想要插入一個跨域的網址，導致報錯。這樣設計的目的是，防止惡意代碼讓用戶以為他們是在另一個網站上。
history.replaceState 方法的參數與 pushState 方法一模一樣，區別是它修改瀏覽歷史中當前紀錄,假定當前網頁是 example.com/example.html。
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?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
單頁面應用用戶訪問軌跡埋點
開發過單頁面應用的同學，一定比較清楚，單頁面應用的路由切換是無感知的，不會重新進行 http 請求去獲取頁面，而是通過改變頁面渲染視圖來實現。所以他的實現原理一定也是通過原生的 pushState 或則 replaceState 來實現的。所以在頁面跳轉的時候一定會調用 pushState 或則 replaceState ，要記錄用戶的跳轉信息，我們只要攔截 pushState 和 replaceState，在執行默行為前先執行我們的方法就能夠采集到用戶的跳轉信息了
// 改寫思路：拷貝 window 默認的 replaceState 函數，重寫 history.replaceState 在方法里插入我們的采集行為，在重寫的 replaceState 方法最后調用，window 默認的 replaceState 方法
collect = {}
collect.onPushStateCallback : function(){} // 自定義的采集方法
(function(history){
var replaceState = history.replaceState; // 存儲原生 replaceState
history.replaceState = function(state, param) { // 改寫 replaceState
var url = arguments[2];
if (typeof collect.onPushStateCallback == "function") {
collect.onPushStateCallback({state: state, param: param, url: url}); //自定義的采集行為方法
}
return replaceState.apply(history, arguments); // 調用原生的 replaceState
};
})(window.history);
vue-router 的路由實現
既然知道了這個原理，我們來看下 vue-router 的實現，我們打開 vue-router 項目地址,把項目克隆下來，或則直接在 github 上預覽，在 Vue 開發的項目里，我們通過 router.push("home") 來實現頁面的跳轉，所以我們檢索下，push 方法的實現
我們檢索到了 20 個 js 文件，
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107749.html
摘要：而路由則是使用了中新增的事件和事件。總結這一章主要是介紹了如何使用在中構建我們的前端路由。 系列目錄地址 一、基礎知識概覽 第一章 - 一些基礎概念（posted at 2018-10-31） 第二章 - 常見的指令的使用（posted at 2018-11-01） 第三章 - 事件修飾符的使用（posted at 2018-11-02） 第四章 - 頁面元素樣式的設定（posted a...
摘要：出于安全的考慮，開發人員無法得知用戶瀏覽過的。這個方法接受一個參數，表示向后或向前跳轉的頁面數的一個整數值。該事件觸發時，該對象會傳入回調函數。假定當前網頁是。顯示為顯示為顯示為顯示為顯示為顯示為三事件事件是對象上的事件，配合和方法使用。 首先要學習一下history對象，history對象保存著用戶的上網記錄，從瀏覽器窗口打開的那一刻算起。出于安全的考慮，開發人員無法得知用戶瀏覽過的...
摘要：路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監測值變化，可以在對象上監聽這個事件。這兩個方法應用于瀏覽器記錄棧，在當前已有的基礎之上，它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統。vue-router是...
showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現了Vue-router,react-router-dom等前端路由管理庫，利用他們構建出來的單頁面應用，也是越來越接近原生的體驗，再也不是以前的點擊標簽跳轉頁面，刷新整個頁面了，那么他們的原理是什么呢？ 優質gitHub開源練手項目： ...
閱讀 1280·2021-11-17 09:33
閱讀 1749·2021-09-09 11:53
閱讀 3224·2021-09-04 16:45
閱讀 1404·2021-08-17 10:12
閱讀 2397·2019-08-30 15:55
閱讀 1782·2019-08-30 15:53
閱讀 2412·2019-08-30 15:52
閱讀 2562·2019-08-29 18:41
