前端路由筆記

Acceml 發布于2019-08-23 15:30 / 3310人閱讀

摘要：只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕，或者在代碼中調用。原理在點擊某個路由時執行，在操作瀏覽器時執行修改至不會引起頁面刷新，而是當作新頁面加到歷史記錄中。值變化會觸發事件。

前端路由的實現本質：檢測URL變化，獲取url地址，解析url匹配頁面；
檢測URL變化有兩種方式： hash，HTML5 History

HTML5 History
history.pushState 和 history.replaceState這兩個api都分別接收三個參數：狀態對象，標題， url(此url地址不支持跨域，跨域會報錯)
這兩個API都會操作瀏覽器的歷史記錄，并不引起瀏覽器的刷新，pushState會增加一條新的歷史記錄，replaceState會替換當前的歷史記錄；
popstate事件，需要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕，或者在Javascript代碼中調用3.back()。
原理在點擊某個路由時執行pushState，在操作瀏覽器時執行popstate；

hash location.hash
window.location修改hash至不會引起頁面刷新，而是當作新頁面加到歷史記錄中。hash值變化會觸發hashchange事件。

Function Router(){
    this.currentUrl = "";
    this.routes = {};
}

Router.prototype.route = function(url, callback){
    this.routes[url] = callback || function(){}
}

Router.prototype.refresh = function(){
    this.currentUrl = location.hash.slice(1) || "/";
    this.routes[this.currentUrl]();
}

Router.prototype.init = function(){
    window.addEventListener("load", this.refresh.bind(this), false);
    window.addEventListener("hashchange", this.refresh.bind(this), false);
}
//使用
var $target = $("#target");
var route = new Router();
route.init();
route.route("/", $target.html("this is index page!!") );
route.route("/page1", $target.html("this is page1!!"));

GPU云服務器云服務器筆記本怎么連接無線路由器前端路由 js前端路由 js前端路由原理

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

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

學習前端路由和vue-router筆記

摘要：前端路由原理本質就是監聽的變化，然后匹配路由規則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現方式就是，當后面的哈希值發生變化時，不會向服務器請求數據，可以通過事件來監聽到的變化，從而進行跳轉頁面。前端路由原理本質就是監聽 URL 的變化，然后匹配路由規則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現方式 hash history www....

李文鵬 2019-08-23 15:06 評論0 收藏0
Vue2.0實用筆記

摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...

draveness 2019-08-23 16:09 評論0 收藏0
Vue2.0實用筆記

摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...

maochunguang 2019-08-02 16:08 評論0 收藏0
Vue2.0實用筆記

摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...

JowayYoung 2019-08-30 15:56 評論0 收藏0