前端开发:带你深入理解路由两种模式

2023-05-24 0 889

不论是React却是Vue后端架构图形时,一般来说有hash和history三种路由器形式。hash路由器商业模式透过窃听url中hash变动图形相同的文本,它不能向服务器端允诺。history路由器商业模式是窃听url方向变动,须要应用程序和服务器端全力支持。

前端开发:带你深入理解路由两种模式

一、Hash路由器

hash路由器透过该事件hashchange窃听url中hash变动,在首度步入网页的这时候此该事件并不能继续执行,须要紧密结合load该事件监控首度读取的情形。那么接下去单纯PCB呵呵hashRouter。

class HashRouter {

// 现阶段方向URL

currentUrl = “”;

constructor() {

this.callback =

this.callback.bind(this);

window.addEventListener(“load”, this.callback);

window.addEventListener(“hashchange”, this.callback);

}

// 当hash变动的这时候继续执行的回调函数

callback() {

→ /home

let path =

this.getHashPath(location.hash);

this.currentUrl = path;

}

getHashPath(url) {

return url.slice(1);

}

}

二、History路由器

history路由器会使用到window.history对象的方法,它提供的方法使用操作浏览器的会话历史记录。它提供的方有:

back():

后退到浏览器会话历史上一次;

forward():

前进到浏览器会话历史下一次;

go(number):

转到指定某一次浏览器会话历史,正数为前进,负数为后退;

pushState(state,title,url):

前进到指定URL,会将URL数据push进会话历史中;

replaceState(state,title,url):

将URL替换现阶段方向;

以上几种形式只会修改现阶段网页的URL,并不能发送允诺。刷新浏览器后,会向服务器端http网页允诺,因此如果使用history路由器商业模式,须要服务器端配置。

使用history路由器商业模式时,须要窃听路由器变动,window提供的有popstate该事件,但是这个该事件只能当back,forward,go三个方法继续执行的这时候才会继续执行,pushState和replaceState继续执行时并不能触发。针对这种情形可以使用window.dispatchEvnet去触发popstate该事件回调。

class HistoryRouter {

currentUrl = “”;

constructor() {

this.callback =

this.callback.bind(this);

this.addStateListener();

// 添加load及网页跳转继续执行的窃听

window.addEventListener(“load”, this.callback);

window.addEventListener(“popstate”, this.callback);

}

addStateListener() {

const listener = function

(type) {

let hisFn =

history[type];

return function () {

// 调用history的pushState,reaplaceState该事件

let fn =

hisFn.apply(this, arguments);

let e = new

Event(“popstate”);

e.arguments =

arguments;

// 透过window.dispatchEvent触发popstate该事件

window.dispatchEvent(e);

return fn;

};

};

window.history.pushState =

listener(“pushState”);

window.history.replaceState =

listener(“replaceState”);

}

callback() {

this.currentUrl =

location.pathname;

}

}

总结

hash路由器商业模式透过hashchange窃听hash变动,history商业模式下透过对pushState及replace方法重写,透过dispatchEvent调用popstate回调。

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务