<!DOCTYPE html>

<html lang="en">

<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>Document</title>

</head>

<body>

    <!-- hash -->

    <!-- <a href="#/hash">hash</a>

    <a href="#/history">历史</a> -->

    <a id="hash" href="/hash">hash</a>

    <a id="history" href="/history">历史</a>

    <div id="html">

    </div>

<script>

    //hash

    // window.addEventListener('load',()=>{

    //     html.innerHTML = location.hash.slice(1);

    // });

    // window.addEventListener('hashchange',()=>{

    //     html.innerHTML = location.hash.slice(1)

    // });

    //history

    function go(path) {

         history.pushState({}, null, href);

        html.innerHTML = href;

    }

    hash.onclick = function () {

        let href = this.getAttribute('href');

        go(href);

        return false;

    }

    history.onclick = function () {

            let href = this.getAttribute('href');

            go(href);

            return false;

    }

    window.addEventListener('popstate',()=>{

        go(location.pathname);

    })

</script>

</body>

</html>

现代主流框架路由原理 hash、history的底层原理的更多相关文章

  1. vue切换路由模式{hash/history}

    vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...

  2. Hash一致性算法底层原理

    大纲 Hash取余算法 判定哈希算法好坏的四个定义 一致性Hash算法的两大设计 Hash取余算法 hash(Object.key)%N,hash值随Object.key.N的变化而变化. 如果有节点 ...

  3. Vue 的路由实现 Hash模式 和 History模式

    Hash 模式: Hash 模式的工作原理是onhashchange事件,Window对象可以监听这个事件... 可以通过改变路径的哈希值,来实现历史记录的保存,发生变化的hash 都会被浏览器给保存 ...

  4. Vue路由的hash模式与history模式的区别?

    1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别?   hash                    ...

  5. python三大web框架Django,Flask,Flask，Python几种主流框架，13个Python web框架比较，2018年Python web五大主流框架

    Python几种主流框架 从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python We ...

  6. 第二百五十七节，Tornado框架-路由映射，逻辑处理，文件归类配置

    Tornado框架-路由映射,逻辑处理,文件归类配置 Tornado框架 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起 ...

  7. react 记录：React Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

    前言: react-router-dom 4.4.2 在页面中直接使用 import { Link } from 'react-router-dom' //使用 <Link to={{ path ...

  8. 关于Linux主流框架运维工作剖析

    LINUX是开源的,这也是最主要的原因,想学Windows,Unix对不起,没有源代码.也正是因为这样,LINUX才能够像雪球一样越滚越大,发展到现在这种规模.今天将为大家带来关于Linux主流框架运 ...

  9. 前端三大主流框架的对比React、Vue、Angular

    前端三大主流框架的对比React.Vue.Angular React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的 ...

随机推荐

  1. python 直接if判断和is not None的区别

    tmpName = ''if tmpName: print tmpName #没有输出if tmpName is not None: print tmpName #有输出,是空行

  2. H3C 命令行历史记录功能

  3. vue3——vue数据循环渲染

    博客地址 :https://www.cnblogs.com/sandraryan/ vue循环渲染 <!DOCTYPE html> <html lang="en" ...

  4. hdu 1217 Arbitrage（佛洛依德）

    Arbitrage Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  5. 【CSS3】3D立方体动画

    关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...

  6. js实现div的碰壁反弹效果

    文章地址 https://www.cnblogs.com/sandraryan/ 需求: 写一个div,让div在父级进行匀速运动,碰到父级上下左右的边框,就向反方向运动. 碰壁反弹在游戏制作中很常用 ...

  7. 洛谷P1595 信封问题 题解 错排问题

    作者:zifeiy 标签:排列组合,错排问题 题目链接:https://www.luogu.org/problem/P1595 题目描述:某人写了n封信和n个信封,如果所有的信都装错了信封.求所有信都 ...

  8. java反斜杠替换

    java replaceAll() 方法要用 4 个反斜杠,表示一个反斜杠 例如 str1="aa\bbb"; str2="aa'bbb"; 要想替换成 str ...

  9. Redux action 状态

    action  不同的状态,设置不同的action.type [就是一个名字],返回对应的数据 不同的状态返回不同的  接口数据

  10. H3C 衡量路由协议的主要指标