<!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. List转换为字符串并添加分隔符

    // 方法一: public String listToString(List list, char separator) { StringBuilder sb = new StringBuilder ...

  2. [Web 前端] 前端频道之团队维护、聚合、订阅

    cp from :https://blog.csdn.net/ivan820819/article/details/78885404 国内 腾讯 ISUX 腾讯全端 AlloyTeam 奇舞周刊 阿里 ...

  3. Python 网络请求模块 urllib 、requests

    Python 给人的印象是抓取网页非常方便,提供这种生产力的,主要依靠的就是 urllib.requests这两个模块. urlib 介绍 urllib.request 提供了一个 urlopen 函 ...

  4. 可重入读写锁ReentrantReadWriteLock基本原理分析

    前言 本篇适用于了解ReentrantLock或ReentrantReadWriteLock的使用,但想要进一步了解原理的读者.见于之前的分析都是借鉴大量的JDK源码,这次以流程图的形式代替源码,希望 ...

  5. ConcurrentHashMap和HashMap的区别

    (1)ConcurrentHashMap对整个桶数组进行了分段,而HashMap则没有 (2)ConcurrentHashMap在每一个分段上都用锁进行保护,从而让锁的粒度更精细一些,并发性能更好,而 ...

  6. Qt实现自定义按钮的三态效果

    好久之前做的一个小软件,好长时间没动过了,在不记录下有些细节可能都忘了,这里整理下部分功能的实现. 按钮的三态,指的是普通态.鼠标的停留态.点击态,三态是界面交互非常基本的一项功能,Qt中如果使用的是 ...

  7. swift3.0：CoreData的使用

    一.介绍 CoreData不像slqite3那样编写代码繁琐,同时避免了使用了SQL语句的麻烦,也可以回避使用C语言的语法,降低了iOS开发的技术门槛. CoreData可降低开发成本,提高代码质量. ...

  8. Android Animatioin总结

    一.动画分类 1.  View Animation (Tween动画)  执行一系列简单的转换.      针对 视图对象内容进行移动,放大,缩小以及产生透明度的变化等四种动画操作.仅针对视图对象内容 ...

  9. 使用C#反射机制访问类的私有成员【转】

    首先我必须承认访问一个类的私有成员不是什么好做法.大家也都知道私有成员在外部是不能被访问的.而一个类中会存在很多私有成员:如私有字段.私有属性.私有方法.对于私有成员访问,可以套用下面这种非常好的方式 ...

  10. C#线程同步方法汇总

    我们在编程的时候,有时会使用多线程来解决问题,比如你的程序需要在 后台处理一大堆数据,但还要使用户界面处于可操作状态:或者你的程序需要访问一些外部资源如数据库或网络文件等.这些情况你都可以创建一个子线 ...