<!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之Activity与fragment完整生命周期图

    转自:https://github.com/xxv/android-lifecycle

  2. Java命令学习系列（四）——jstat

    jstat(JVM Statistics Monitoring Tool)是用于监控虚拟机各种运行状态信息的命令行工具.他可以显示本地或远程虚拟机进程中的类装载.内存.垃圾收集.JIT编译等运行数据, ...

  3. Jackcess 1.2.13 发布，Java 访问 Access 数据库

    Jackcess 1.2.13 包含新的方法用于在数据库和附件内容解码中查找复杂值类型的关系,修复了 CodeHandler 相关的一些小 bug. Jackcess 是一个Java 类库,用来读写微 ...

  4. windows核心编程-互斥器(Mutexes)

    线程同步的方式主要有:临界区.互斥区.事件.信号量四种方式. 前边讲过了临界区线程同步-----windows核心编程-关键段(临界区)线程同步,这章我来介绍一下互斥器(Mutexes)在线程同步中的 ...

  5. Centos 7安装protobuf3.6.1

    新版本 google protobuf-3.6.1是现在最新版本,添加了新的特性,看说明 下载地址 https://github.com/protocolbuffers/protobuf/releas ...

  6. hdu4753 Fishhead’s Little Game 状态压缩，总和一定的博弈

    此题和UVA 10891 Game of Sum 总和一定的博弈,区间dp是一个道理,就是预处理麻烦 这是南京网络赛的一题,一直没做,今天做了,虽然时间有点长,但是1ac,这几乎是南京现场赛的最后一道 ...

  7. go语言之进阶篇定时器重置

    1.定时器重置 示例: package main import ( "fmt" "time" ) func main() { timer := time.New ...

  8. [leetcode]Pow(x, n) @ Python

    原题地址:https://oj.leetcode.com/problems/powx-n/ 题意:Implement pow(x, n). 解题思路:求幂函数的实现.使用递归,类似于二分的思路,解法来 ...

  9. 服务器主体 "sa" 无法在当前安全上下文下访问数据库 XXX[SQLSTATE 08004] (错误 916). 该步骤失败。

    作业脚本为use XXX go 修改为选择XXX数据库

  10. python3 特殊字符处理 \x06\x05\x07

    最近在处理Excel文件中,报错:openpyxl.utils.exceptions.IllegalCharacterError, 原因是某字段出现特殊字符 \x05,\x06,\x07如下图: 在E ...