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. 环境配置 | Pycharm远程开发的环境配置

    目的:同局域网中的两台电脑,Mac上看视频学习编程 + 当服务器跑代码:Windows上使用Pycharm写代码.学习远程开发 (当前底子有限,很多操作可能存在理解偏差) Mac上代码存放路径:~/O ...

  2. python使用信号机制实例：

    python使用信号机制实例: 程序会一直等待,直到其他程序发送CTRL-C信号给本进程.需要其他程序配合测试. 或者打开新的终端使用kill -sig PID 向一个进程发送信号,来测试. from ...

  3. node.js 和 yarn 安装

    电脑环境 windows10 专业版 64 位 node.js 安装 Node.js 官方网站下载:https://nodejs.org/en/ 之后一步步得傻瓜式安装 配置环境变量和查看node.j ...

  4. windows系统下，gpu开发环境部署

    1,安装python,使用anaconda或者直接用python.exe安装都可以.我用的是python3.6版的 对于相关的程序包,比如tensorflow或者opencv等,anaconda可以在 ...

  5. sublime3使用技巧

    1.鼠标悬浮,显示文件引用 Preference ——>   Settings   ——>    "index_files": true   (保存,重新打开即可) 2 ...

  6. wampserver 配置的几个坑（雾

    1. 从安装版本说起 自从我进入大学之后,便继承了学长那里的wampserver2.5版本 直到有一天自己下载wamp的时候才注意到已经有 3.0.6版本了 (现在有更高的了 但是3.0.6够用了) ...

  7. Ansible - 配置文件

    概述 再水一发 ref Ansible Configuration Settings 1. 查看 概述 查看 配置文件 的默认位置 命令 > ansible --version 结果 confi ...

  8. JS-禁用浏览器前进后退

    使用jQuery: <script type="text/javascript" language="javascript"> $(document ...

  9. ora 01704 字符串文字太长

    分析sql执行失败的原因,在于没有强制指定插入字符串为clob类型,解析sql时,oracle会把插入的字符串作为 “字符串类型”处理,由于oracle有最大字符串限制(不超过4000个字符),所以会 ...

  10. 「JSOI2015」圈地

    「JSOI2015」圈地 传送门 显然是最小割. 首先对于所有房子,权值 \(> 0\) 的连边 \(s \to i\) ,权值 \(< 0\) 的连边 \(i \to t\) ,然后对于 ...