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. Strategic game(无向?)二分图最小点覆盖(Poj1463,Uva1292)

    原题链接 此题求二分图的最小点覆盖,数值上等于该二分图的最大匹配.得知此结论可以将图染色,建有向图,然后跑匈牙利/网络流,如下.然而... #include<iostream> #incl ...

  2. Atcoder Beginner Contest 155D（二分，尺取法，细节模拟）

    二分,尺取法,细节模拟,尤其是要注意a[i]被计算到和a[i]成对的a[j]里时 #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> ...

  3. Ad Hoc类问题

    __________________________________ Ad Hoc类问题的方法:(1)机理分析法.分析题目描述,推出算法. (2)统计分析法.追寻最终的数学模型. Problem 1: ...

  4. Leetocde的两道丑数题目：264. 丑数 II➕313. 超级丑数

    Q: A: 用变量记录已经✖2.✖3.✖5的元素下标i2.i3.i5.表示截止到i2的元素都已经乘过2(结果添加到序列尾部的意思),i3.i5同理.这样每次可以循环可以O(1)时间找到下一个最小的丑数 ...

  5. php商城数据库的设计 之无限分类

    商品分类,使用无限分类 即: -------如何创建数据表 pid---父级分类id,如果是顶级分类则为0 path---1,用户分类的排序 . 排序示例: 实现逻辑:获取type表的所有分类,ord ...

  6. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  7. JS json对象(Object)和字符串(String)互转方法

    [JS json对象(Object)和字符串(String)互转方法] 参考:https://blog.csdn.net/wenqianla2550/article/details/78232706 ...

  8. shim是什么？

    Vue响应式原理中说道:Object.defineProperty是Es5中无法shim的特性,那么这里的shim是什么呢? shim可以将新的API引入到旧的环境中,而且仅靠就环境中已有的手段实现. ...

  9. Linux centos7 shell 介绍、 命令历史、命令补全和别名、通配符、输入输出重定向

    一.shell介绍 shell脚本是日常Linux系统管理工作中必不可少的,不会shell,就不是一个合格管理员. shell是系统跟计算机硬件交互使用的中间介质,一个系统工具.实际上在shell和计 ...

  10. .NET平台性能测试工具BenchmarkDotnet 简介[译文]

    项目中需要用到性能测试,发现.net 平台的这个神器. 觉得很不错,接下来准备做个系列.具体参考官方介绍 做基线对比测试不是那么容易,你很容易就翻车掉坑里,BenchmarkDotNet 会帮你避坑( ...