成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端路由筆記

Acceml / 3323人閱讀

摘要：只有在做出瀏覽器動(dòng)作時(shí)，才會(huì)觸發(fā)該事件，如用戶點(diǎn)擊瀏覽器的回退按鈕，或者在代碼中調(diào)用。原理在點(diǎn)擊某個(gè)路由時(shí)執(zhí)行，在操作瀏覽器時(shí)執(zhí)行修改至不會(huì)引起頁面刷新，而是當(dāng)作新頁面加到歷史記錄中。值變化會(huì)觸發(fā)事件。

前端路由的實(shí)現(xiàn)本質(zhì)：檢測(cè)URL變化，獲取url地址，解析url匹配頁面；
檢測(cè)URL變化有兩種方式： hash，HTML5 History

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

hash location.hash
window.location修改hash至不會(huì)引起頁面刷新，而是當(dāng)作新頁面加到歷史記錄中。hash值變化會(huì)觸發(fā)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!!"));

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102153.html

相關(guān)文章

  • 學(xué)習(xí)前端路由和vue-router筆記

    摘要：前端路由原理本質(zhì)就是監(jiān)聽的變化，然后匹配路由規(guī)則，顯示相應(yīng)的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實(shí)現(xiàn)方式就是，當(dāng)后面的哈希值發(fā)生變化時(shí)，不會(huì)向服務(wù)器請(qǐng)求數(shù)據(jù)，可以通過事件來監(jiān)聽到的變化，從而進(jìn)行跳轉(zhuǎn)頁面。 前端路由原理本質(zhì)就是監(jiān)聽 URL 的變化，然后匹配路由規(guī)則，顯示相應(yīng)的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實(shí)現(xiàn)方式 hash history www....

    李文鵬 評(píng)論0 收藏0

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實(shí)現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實(shí)現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動(dòng)畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    draveness 評(píng)論0 收藏0

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實(shí)現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實(shí)現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動(dòng)畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    maochunguang 評(píng)論0 收藏0

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實(shí)現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實(shí)現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動(dòng)畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    JowayYoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<