<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <h4>使用 h5 实现前端路由</h4>

        <ul>

            <li>

                <a onclick="home()">首页</a>

            </li>

            <li>

                <a onclick="message()">消息</a>

            </li>

            <li>

                <a onclick="mine()">我的</a>

            </li>

        </ul>

        <div id="showContent" style="height:240px;width:200px;background-color:red">

            home

        </div>

    </body>

    <script type="text/javascript">

        function home() {

            // 添加到历史记录栈中

            history.pushState({

                name: 'home',

                id: 1

            }, null, "?page=home#index")

            showCard('home')

        };

        function message() {

            history.pushState({

                name: 'message',

                id: 2

            }, null, "?page=message#haha")

            showCard('message')

        }

        function mine() {

            history.pushState({

                id: 3,

                name: 'mine'

            }, null, "?name=tigerchain&&sex=man")

            showCard('mine')

        }

        // 监听浏览器回退 并且刷新到指定内容

        window.addEventListener('popstate', function(event) {

            var content = "";

            if(event.state) {

                content = event.state.name;

            }

            console.log(event.state)

            console.log("history 中的历史栈中的 name ：" + content)

            showCard(content)

        })

        // 此方法和上面的方法是一毛一样的，只是两种不同的写法而已

        // window.onpopstate = function (event) {

        //   var content = "";

        //   if(event.state) {

        //     content = event.state.name;

        //   }

        //   showCard(content);

        // }

        function showCard(name) {

            console.log("当前的 hash 值是：" + location.hash)

            document.getElementById("showContent").innerHTML = name;

        }

    </script>

</html>

出处：https://www.jianshu.com/p/9a7d79249741

最基础前端路由实现，事件popstate使用的更多相关文章

  1. javascript基础修炼(6)——前端路由的基本原理

    [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...

  2. Vue基础（五）---- 前端路由

    基本结构: ◆ 1.路由的基本概念与原理 ◆ 2.vue-router的基本使用 ◆ 3.vue-router嵌套路由 ◆ 4.vue-router动态路由匹配 ◆ 5.vue-router命名路由 ...

  3. 【源码拾遗】从vue-router看前端路由的两种实现

    本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项.最后分析了如何实现可以直接从文件 ...

  4. 前端路由简介以及vue-router实现原理

    后端路由简介 路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口( ...

  5. 前端路由两种模式：hash、history

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  6. 前端路由以及浏览器回退，hash & history & location

    一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...

  7. 前端路由的两种模式： hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  8. 前端路由原理及vue-router介绍

    前端路由原理本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新.目前单页面使用的路由就只有两种实现方式 hash history www.test.com/##/ 就是 Ha ...

  9. 前端MVC Vue2学习总结（八）——前端路由

    路由是根据不同的 url 地址展示不同的内容或页面,早期的路由都是后端直接根据 url 来 reload 页面实现的,即后端控制路由. 后来页面越来越复杂,服务器压力越来越大,随着AJAX(异步刷新技 ...

随机推荐

  1. PTA 7-2 邻接表创建无向图 (20分)

    PTA 7-2 邻接表创建无向图 (20分) 采用邻接表创建无向图G ,依次输出各顶点的度. 输入格式: 输入第一行中给出2个整数i(0<i≤10),j(j≥0),分别为图G的顶点数和边数. 输 ...

  2. java语言方法中定义final类型的入参有什么用意？

    无论参数是基本数据类型,还是引用数据类型,只要加了final,不好意思,该参数不可以再赋值(实参传进来给形参,就相当于初始化完成).可以防止在方法里面不小心重新赋值,造成一些不必要的麻烦!!!参考:h ...

  3. java自定义序列化

    自定义序列化 1.问题引出 在某些情况下,我们可能不想对于一个对象的所有field进行序列化,例如我们银行信息中的设计账户信息的field,我们不需要进行序列化,或者有些field本省就没有实现Ser ...

  4. 通过t-sql定期自动备份SQL Server 上的所有数据库

    项目背景 解决方案 方案一,是采用SQL的定时备份,建立作业来操作,这里有完整的使用手册: 方案二:基于t-sql方法进行查询备份 方案思路: 1.1 在 Master 数据库上创建一个备份所有数据库 ...

  5. 软件分享：网页监测及 IIS 重启工具 IISMonitor

    本人以前编写过一款简单的工具软件 IISMonitor,这几天整理完善并补写了使用说明,分享出来,供大家免费使用.使用过程中,遇到什么问题或有什么建议,也可回帖留言,我尽力提供修改支持. 1.工具简介 ...

  6. SpringCloud微服务实战——搭建企业级开发框架（十九）：Gateway使用knife4j聚合微服务文档

      本章介绍Spring Cloud Gateway网关如何集成knife4j,通过网关聚合所有的Swagger微服务文档 1.gitegg-gateway中引入knife4j依赖,如果没有后端代码编 ...

  7. java动态编译——tools.jar问题

    笔者在学习中写了一段简单的动态编译代码,但编译一直无法通过,起初认为受路径中存在汉字影响,修改路径后仍然没有解决.最终定位错误是:Java在进行动态编译的时候需要用到tools.jar资源包,若too ...

  8. 最大连续子数组和--dp

    最大连续子数组和 问题: 给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的子段和的最大值.当所给的整数均为负数时定义子段 ...

  9. [cf1444D]Rectangular Polyline

    由于两种线段要交替出现,有解的必要条件即为$h=v$(以下均记为$n$) 进一步的,再假设两种线段依次对应于向量$(a_{i},0)$和$(0,b_{i})$,根据题意要求向量长度为给定值且和为0,那 ...

  10. [atARC068F]Solitaire

    对于最终的序列$a_{i}$,条件如下: 1.$a_{i}$是一个排列,且$a_{k}=1$ 2.不存在三元组$1\le x<y<z<k$,使得$a_{x}<a_{y}< ...