<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>单页面SPA应用路由原理</title>

        <style type="text/css">

            .api,

            .hash {

                color: blue;

                display: block;

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <a class='api a'>a.html</a>

        <a class='api b'>b.html</a>

        <p>

        </p>

        <a class='hash a'>#a.html</a>

        <a class='hash b'>#b.html</a>

        <script type="text/javascript">

            // 注册路由

            // 说明:document.querySelectorAll('.api') 返回的是类数组对象NodeList,这个NodeList可以使用数组的方法forEach

            // NodeList只有数组的forEach方法,其他方法map/filter等方法没有

            document.querySelectorAll('.api').forEach(item => {

                item.addEventListener('click', (e) => {

                    // 阻止默认事件

                    e.preventDefault();

                    let link = item.textContent;

                    // pushState有3个参数,第一个参数是跳转url的状态信息,第二个参数是页面标题,第三个参数是跳转链接

                    //

                    window.history.pushState({

                            name: 'api'

                        },

                        '页面标题',

                        link

                    )

                }, false) // false 表示冒泡阶段执行

            });

            // 监听路由

            // popstate 属于window事件

            window.addEventListener('popstate', (e) => {

                console.log({

                    location: location.href,

                    state: e.state

                })

            })

            // 注册路由

            document.querySelectorAll('.hash').forEach(item => {

                item.addEventListener('click', (e) => {

                    e.preventDefault();

                    let link = item.textContent;

                    window.location.hash = link

                }, false)

            });

            // 监听路由

            // hashchange 属于window事件

            window.addEventListener('hashchange', (e) => {

                console.log({

                    location: location.href,

                    state: e.state

                })

            })
　　　　　　// hash改变的方法：
　　　　　　// window.location.assign('#a')
　　　　　　// window.location.replace('#b')

        </script>

    </body>

</html>

说明：pushstate和replacestate不能监听到路由变化，可以重写pushstate和replacestate，这样就获取到了pushState 和 replaceState 的参数。

// Add this:

var _wr = function(type) {

    var orig = history[type];

    return function() {

        var rv = orig.apply(this, arguments);

        var e = new Event(type);

        e.arguments = arguments;

        window.dispatchEvent(e);

        return rv;

    };

};

history.pushState = _wr('pushState');

history.replaceState = _wr('replaceState');

// Use it like this:

window.addEventListener('pushState', function(e) {

    console.warn('THEY DID IT AGAIN!');

});

window.addEventListener('replaceState', function(e) {

    console.warn('THEY DID IT AGAIN!');

});

hash和history的区别：

hash：

（1）丑

（2）hash会占用锚点功能

（3）兼容性较好

history：

（1）路由与后端无异

（2）IE10级以上

（3）需要后端支持

（4）popstate仅仅在前进或者后退时才触发。

onpopstate

单页面SPA应用路由原理 history hash的更多相关文章

  1. vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案

    项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后, ...

  2. 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 前端路由原理之 hash 模式和 history 模式

    什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...

  4. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  5. AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

    就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...

  6. [转] 2017-11-20 发布 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  7. 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  8. Angular——单页面与路由的使用

    单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把W ...

  9. hash值是啥，单页面应用的实质

    1.什么hash Location hash属性,http://www.runoob.com/jsref/prop-loc-hash.html,hash 属性是一个可读可写的字符串,该字符串是 URL ...

随机推荐

  1. Android之对TabActivity的见解，个人觉得不错

    http://www.cnblogs.com/answer1991/archive/2012/05/08/2489844.html answer1991 无法停止我内心的狂热,对未来的执着. Andr ...

  2. 使用Camera进行拍照 & 后台静默拍照的思路

    Android中的Camera可以用来进行自定义相机.取景框实时预览.拍照等操作.在5.0中,这个类不推荐使用了,新出了一个Camera2,那个东西没怎么研究过,反正一时半会用不到.本篇讲解的是如果用 ...

  3. TabHost的初步使用

    本文主要参考自:http://blog.csdn.net/wulianghuan/article/details/8588947 (里面有TabHost第二种定义的方式,继承TabActivity) ...

  4. 用自定义的RoundImageView来实现圆形图片（可加边框）

    本文的控件来自:http://blog.csdn.net/alan_biao/article/details/17379925 这个控件不同于之前介绍过的那个框架,这个仅仅能过将图片裁剪为圆形,没能弄 ...

  5. 如何进行Logstash logstash-input-jdbc插件的离线安装

    我们单位的服务器位于隔离区,不允许链接互联网,因此整理了在ELK集群上离线安装Logstash的jdbc input插件的方法,供大家参考. 总体思路是需要一台中转的机器,这台机器需要能够访问互联网, ...

  6. 局部响应归一化（Local Response Normalization，LRN）

     版权声明:本文为博主原创文章,欢迎转载,注明地址. https://blog.csdn.net/program_developer/article/details/79430119 一.LRN技术介 ...

  7. Intellij IDEA打开就闪退或关闭

    找到idea安装目录的bin目录,搜索vmoptions可以看到两个文件, idea.exe.vmoptions idea64.exe.vmoptions 1 这两个文件就是IDEA的一些配置文件,带 ...

  8. 初学 Delphi 嵌入汇编[1] - 汇编语言与机器语言

    非科班出身, 现在才接触汇编, 惭愧呀, 好好学! 主选课本是清华大学王爽老师的<汇编语言>. 推荐 王爽老师的汇编网 汇编语言之前是机器语言. 机器语言是机器指令的集合, 机器指令是一系 ...

  9. python3 IEDriver抓取时报数据

    最近做了测试抓取XX时报的数据,由于需要事先登录,并且有验证码,关于验证码解决有两个途径:一是利用打码平台,其原理是把验证码的图片上传发送给打码平台, 然后返回其验证码.二就是自己研究验证码技术问题. ...

  10. java多线程之间的顺序问题

    java 多线程: 这样写有问题的:这样写可以的: package com.test; import java.util.concurrent.CountDownLatch; import java. ...