<!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. Bert系列（二）——源码解读之模型主体

    本篇文章主要是解读模型主体代码modeling.py.在阅读这篇文章之前希望读者们对bert的相关理论有一定的了解,尤其是transformer的结构原理,网上的资料很多,本文内容对原理部分就不做过多 ...

  2. E - D Tree HDU - 4812 点分治+逆元

    这道题非常巧妙!!! 我们进行点分治的时候,算出当前子节点的所有子树中的节点,到当前节点节点的儿子节点的距离,如下图意思就是 当前节点的红色节点,我们要求出红色节点的儿子节点绿色节点,所有绿色的子树节 ...

  3. Android Studio(十一)：代码混淆及打包apk

    Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...

  4. poj 2442 Sequence (Priority Queue)

    2442 -- Sequence 真郁闷,明明方法是对的,为什么我的代码老是那么的慢._(:з」∠)_ 这题要想考虑两列的情况,然后逐列拓展. 代码如下: #include <cstdio> ...

  5. Node.js 安装第三方模块包(npm),通过 package.json配置信息安装项目依赖的模块

    npm下载安装的第三方模块包官网(提供包名和使用方法):https://www.npmjs.com/ 淘宝镜像(国内,比较快):https://npm.taobao.org/ commonjs01.j ...

  6. 小程序加载大图片 使用widthFix时，图片先拉伸然后才显示完全

    <image src="http://www.ll.com/sss.jpg" mode="widthFix" style="width:180r ...

  7. display的值和对应的意义

    none:隐藏对应元素,不为隐藏的对象保留其物理空间 block:指定对象为块元素 inline:指定对象为内联元素 inline-block:指定对象为内联块元素 table:指定对象为块元素的表格 ...

  8. keras 保存模型和加载模型

    import numpy as npnp.random.seed(1337) # for reproducibility from keras.models import Sequentialfrom ...

  9. 学习PHP好，还是Python好呢？

    首先简单介绍一下Python. Python在出现以来,已经有数以千计基于这项技术的网站和软件项目,Python因其独有的特点从众多开发语言中脱颖而出,深受世界各地的开发者喜爱. 下面,我们列举了Py ...

  10. 2018-8-10-如何入门-C++-AMP-教程

    title author date CreateTime categories 如何入门 C++ AMP 教程 lindexi 2018-08-10 19:16:51 +0800 2018-2-13 ...