<!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. 解决eclipse中web项目出现Project facet Java version 1.8 is not supported.的问题

    项目的jdk和tomcat的jdk版本不同,将eclipse-preference-server-runtime environments点击你要用的tomcat点击edit-jre选择和你项目对应的 ...

  2. 识骨寻踪第一季/全集Bones迅雷下载

    第一季 Bones Season 1 (2005)看点:这是一部专门从“骨头”上寻找破案线索的刑侦剧.女博士布莱南绰号“骨头”(艾米丽·丹斯切尔 Emily Deschanel 饰),是个学识渊博.专 ...

  3. ExtJS 4.2 教程-04：数据模型

    转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-4-data-model ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程 ...

  4. DataGridView设置列标题不换行

    dgv.ColumnHeadersDefaultCellStyle.WrapMode = DataGridViewTriState.False;  //设置列标题不换行 // 设定包括Header和所 ...

  5. SVG 使用marker画箭头（一）

    一.使用Marker画箭头 1.定义一个箭头的marker引用 <defs> <marker id='markerArrow' markerWidth='13' markerHeig ...

  6. [转]php cli命令 自定义参数传递

    FROM :http://www.cnblogs.com/zcy_soft/archive/2011/12/10/2283437.html 所有的PHP发行版,不论是编译自源代码的版本还是预创建的版本 ...

  7. 【转】memcached分布式部署

    FROM : http://www.tuicool.com/articles/777nE3j memcache和memcached两者使用起来几乎一模一样. $mem = new Memcache; ...

  8. godep使用

    安装: 1.mac:brew Install godep,全局可用 2.go get -u -v github.com/tools/godep  参数-u表示更新,-v可以看到进度信息.成功安装后,在 ...

  9. libcurl进行HTTP GET获取JSON数据(转载)

    转载:http://blog.csdn.net/vincent2610/article/details/68488365 #include <stdio.h> #include <i ...

  10. [PowerShell Utils] Automatically Change DNS and then Join Domain

    I would like to start a series of blog posts sharing PowerShell scripts to speed up our solution ope ...