class HistoryRouter{
constructor(){
//用于存储不同path值对应的回调函数
this.routers = {};
this.listenPopState();
this.listenLink();
}
//监听popstate
listenPopState(){
window.addEventListener('popstate',(e)=>{
let state = e.state || {},
path = state.path || '';
this.dealPathHandler(path)
},false)
}
//全局监听A链接
listenLink(){
window.addEventListener('click',(e)=>{
let dom = e.target;
if(dom.tagName.toUpperCase() === 'A' && dom.getAttribute('href')){
e.preventDefault()
this.assign(dom.getAttribute('href'));
}
},false)
}
//用于首次进入页面时调用
load(){
let path = location.pathname;
this.dealPathHandler(path)
}
//用于注册每个视图
register(path,callback = function(){}){
this.routers[path] = callback;
}
//用于注册首页
registerIndex(callback = function(){}){
this.routers['/'] = callback;
}
//用于处理视图未找到的情况
registerNotFound(callback = function(){}){
this.routers['404'] = callback;
}
//用于处理异常情况
registerError(callback = function(){}){
this.routers['error'] = callback;
}
//跳转到path
assign(path){
history.pushState({path},null,path);
this.dealPathHandler(path)
}
//替换为path
replace(path){
history.replaceState({path},null,path);
this.dealPathHandler(path)
}
//通用处理 path 调用回调函数
dealPathHandler(path){
let handler;
//没有对应path
if(!this.routers.hasOwnProperty(path)){
handler = this.routers['404'] || function(){};
}
//有对应path
else{
handler = this.routers[path];
}
try{
handler.call(this)
}catch(e){
console.error(e);
(this.routers['error'] || function(){}).call(this,e);
}
}
}
1.创建一个路由对象, 实现 register 方法用于注册每个 location.pathname 值对应的回调函数
2.当 location.pathname === '/' 时，认为是首页，所以实现 registerIndex 方法用于注册首页时的回调函数
3.解决 location.path 没有对应的匹配，增加方法 registerNotFound 用于注册默认回调函数
4.解决注册的回到函数执行时出现异常，增加方法 registerError 用于处理异常情况
5.定义 assign 方法，用于通过 JS 触发 history.pushState 函数
6.定义 replace 方法，用于通过 JS 触发 history.replaceState 函数
7.监听 popstate 用于处理前进后退时调用对应的回调函数
8.全局阻止A链接的默认事件，获取A链接的href属性，并调用 history.pushState 方法
9.定义 load 方法，用于首次进入页面时 根据 location.pathname 调用对应的回调函数
//html

<body>

<div id="nav">

<a href="/page1">page1</a>

<a href="/page2">page2</a>

<a href="/page3">page3</a>

<a href="/page4">page4</a>

<a href="/page5">page5</a>

<button id="btn">page2</button>

</div>

<div id="container">

</div>

</body>

//js测试

let router = new HistoryRouter();

let container = document.getElementById('container');

//注册首页回调函数

router.registerIndex(() => container.innerHTML = '我是首页');

//注册其他视图回到函数

router.register('/page1', () => container.innerHTML = '我是page1');

router.register('/page2', () => container.innerHTML = '我是page2');

router.register('/page3', () => container.innerHTML = '我是page3');

router.register('/page4', () => {

throw new Error('抛出一个异常')

});

document.getElementById('btn').onclick = () => router.assign('/page2')

//注册未找到对应path值时的回调

router.registerNotFound(() => container.innerHTML = '页面未找到');

//注册出现异常时的回调

router.registerError((e) => container.innerHTML = '页面异常，错误消息：<br>' + e.message);

//加载页面

router.load();

history路由的更多相关文章

  1. Router和History (路由控制)-backbone

    Router和History (路由控制) Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文 ...

  2. 告别 hash 路由，迎接 history 路由

    博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

  3. 单页面应用的History路由模式express后端中间件配合

    这篇文章主要分享一下通过HTML5的history API的时候,使用NodeJS后端应该如何配置,来避免产生404的问题,这里是使用的express的框架,主要是通过connect-history- ...

  4. history路由模式下的nginx配置

    路由模式 众所周知,浏览器下的单页面应用的路由模式有下面两种: hash 模式和 history 模式.hash 模式通用性好,而且不依赖服务器的配置,省心省力,但是缺点是不够优雅.相比于 hash ...

  5. vue cli3项目发布在apache www/vue目录下并配置history路由

    注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...

  6. vue采用history路由的服务器部署问题

    发现部署问题 在部署的时候发现打开的页面是空白 之前部署原理 之前的页面都是作为静态文件形式打包上传到服务器上 http://www.xiedashuaige.cn/bolg2.0/#/home 就和 ...

  7. nginx 一个端口布署多个单页应用（history路由模式）。

    目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(i ...

  8. nginx history路由模式时，页面返回404重定向index.html

    1.路由默认是带#的,有时我们感觉不美观,就使其变为history模式,也就没有#字符 2.# 如果找不到当前页面(404),就返回index.html,重新分配路由 location ^~/prod ...

  9. hash和history路由的区别

    在了解路由模式前,我们先看下 什么是单页面应用,vue-router  的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...

随机推荐

  1. JavaWeb——第1章Web技术概述

    Web本意是蜘蛛网的意思,现常指Internet的Web技术.Web技术提供了方便的信息发布和交流方式,是一种典型的分布式应用结构,Web应用中的每一次信息交换都要涉及客户端和服务器. 一.Inter ...

  2. eli和字符串 (牛客假期训练）

    链接:https://ac.nowcoder.com/acm/contest/3002/G来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言5242 ...

  3. 【游戏体验】I Paid For It!（火柴人破坏狂）

    >>>点此处可试玩无敌版<<< 注意,本游戏含有少量暴力元素,13岁以下的儿童切勿尝试本款游戏 这款游戏打击感非常高,动画也比较绚丽,可玩性很高 个人测评 游戏性 ...

  4. night of 2019.8.14

    饭后一个小时,坐下来看了一会书,是原来的同事推荐的. 最近一段时间,心一点一点平静.能平下心来去做一些事.偶尔也常常对着窗户发呆,想一些人生感悟.想到一些感悟时,常常感到没有人可以说说心里话. 丰子恺 ...

  5. centos源码安装git最新版

    到 git官网下载git 源码安装包,git官网地址:https://www.git-scm.com/ 选择Tarballs系列的安装包,官网git下载:https://mirrors.edge.ke ...

  6. Light Up Your Business Promotions With LED Keychain

    Imagine you want to insert the car key into the keyhole in the dark. What would you do? You will def ...

  7. 普及C组第四题（8.9）

    2298. [noip普及组2T4]异或 (File IO): input:gcdxor.in output:gcdxor.out 题目描述 SarvaTathagata是个神仙,一天他在研究数论时, ...

  8. winform中的DataGridView的列宽设置

    DataGridView有一个属性AutoSizeColumnMode,他有很多枚举值: 1.AllCells 调整列宽,以适合该列中的所有单元格的内容,包括标题单元格.  2.AllCellsExc ...

  9. buuctf 二维码

    首先下载文件 然后用解压工具解压之后 发现是一个二维码 扫描二维码 并没有拿到 flag 然后将图片拖进 hxd中搜索PK发现有一个压缩包  将压缩包提取出来 暴力破解 然后得到密码 然后解压 然后得 ...

  10. 一起学Netty（一）之HelloWorld，可以聊天的小程序哦

    转自于:http://blog.csdn.net/linuu/article/details/51306480