<!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. 如何在 Xcode 中修改应用的名字

    找到 TARGETS 中的 Build Setting ,下拉找到 Packaging ,修改 Product Name 即可.

  2. node.js模块的坑

    在写一个工具的时候,需要将xml转为json方便处理,以前电脑上装的node.js的版本为0.8,结果我再安装node-xml2json时提示版本过低,然后我又重装安装了最新版本. 然后再次尝试安装, ...

  3. 怎样把vector和string数据传给旧的C API

     通常情况下.旧的C API使用数组合char*指针来进行数据交换而不是vector或string对象. 这种API还将存在非常长的一段时间,假设我们想有效地使用STL.我们就必须与它们和平共处. ...

  4. HTML5 本地文件操作之FileSystemAPI简介

    一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...

  5. 相关性系数及其python实现

    参考文献: 1.python 皮尔森相关系数 https://www.cnblogs.com/lxnz/p/7098954.html 2.统计学之三大相关性系数(pearson.spearman.ke ...

  6. exchange 2010

    Set-MailboxFolderPermission dalian:\Calendar -User Default -AccessRights Reviewer C:\>$rooms = Ge ...

  7. rank,dense_rank,row_number使用和区别

    rank,dense_rank,row_number区别 一:语法(用法):     rank() over([partition by col1] order by col2)      dense ...

  8. 简单实现网页另存为word或者excel

    最近在弄网页的导出,在网上找了很多的方法,最后用一种较为简单的方法实现,这次的寻找和解决问题的过程使我加深了对封装和面向对对象的理解更加深刻!在B/S阶段,有很多已经封装好的类,而且在所有的页面都是一 ...

  9. JAVA-SpringMVC开发第一个应用

    找到eclipse工具路径 打开eclipse.exe 选择workspace的存放位置,点击ok 点击file-new 选择web-dynamic web project(动态web项目)-next ...

  10. 用bochs调试自己写的系统引导代码

    1 安装和配置bochs 首先从bochs.sourceforge.net里面把BOCHS给download下来,鉴于Windows的普及,仅仅谈BOCHS在win下的使用方法,其实在其它的OS中方法 ...