<!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. saltStack 状态模块(状态间的关系)

    unless onlyif:状态间的条件判断,主要用于cmd状态模块 常用方法:    onlyif:检查的命令,仅当'onlyif'  选项指向的命令返回true时才执行name 定义的命 unle ...

  2. H3C 广域网的作用

  3. 原生_H5交互插件(适用于与V2.1)

    这是js代码 /* * 适合版本为 2.1.0 * 前提是url上加 from=app */ var Native = {}; var ua = navigator.userAgent; var oU ...

  4. codeforces 615A

    题意:给你m个编号为1到m的灯泡:然后n行中每一行的第一个数给出打开灯泡的个数xi 然后是yij是每个灯泡的编号: 题目中有一句话. 我愣是没看,因为我英语真的是一窍不通,看了也白看,直接看数据做的, ...

  5. [转]爬虫 selenium + phantomjs / chrome

    目录 selenium 模块 安装 phantomjs 浏览器 安装 chromedriver 接口 安装 对比两个接口 整合使用 基本实例 常用属性方法 定位节点 节点操作 其他操作 实例解析 - ...

  6. HDU 6438"Buy and Resell"（贪心+优先级队列）

    传送门 •参考资料 [1]:HDU6438(优先队列+思维) •题意 有n个城市,第 i 天你会达到第 i 个城市: 在第 i 个城市中,你可以用 ai 元购买一个物品,或者用 ai 元卖掉一个物品, ...

  7. linux scull 代码write 方法

    write, 象 read, 可以传送少于要求的数据, 根据返回值的下列规则: 如果值等于 count, 要求的字节数已被传送. 如果正值, 但是小于 count, 只有部分数据被传送. 程序最可能重 ...

  8. 【9307】&【a303】过河卒(NOIP2002)

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 如图,A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右. 同时在棋盘上的任一点有一个对方 ...

  9. java 面试题之银行业务系统

    1.需求 模拟实现银行业务调度系统逻辑,具体需求如下: 银行内有6个业务窗口,1 - 4号窗口为普通窗口,5号窗口为快速窗口,6号窗口为VIP窗口. 有三种对应类型的客户:VIP客户,普通客户,快速客 ...

  10. SpringBoot项目改变图片临时文件的存储路径

    springboot项目,部署到服务器后,运行一段时间后,处理文件上传的接口时,后报异常. Could not parse multipart servlet request; nested exce ...