<!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. PHP 7.0新增特性详解

    https://www.cnblogs.com/riverdubu/archive/2017/03/22/6434705.html 开始介绍PHP7.0新特性,具体的可以参照官网的介绍,我来挑一些给大 ...

  2. HDU - 6534 Chika and Friendly Pairs

    这个题其实也是很简单的莫队,题目要求是给一个序列,询问l-r区间内部,找到有多少对答案满足 i < j 并且 | a[ i ] -a[ j ] | <=k 也就是有多少对,满足差值小于k的 ...

  3. Ubuntu 开机自动挂载磁盘

    Ubuntu 磁盘挂载 1.使用命令查看分区 sudo fdisk -l 1 可以根据上图提供的磁盘信息确定想挂载的磁盘,以及确定挂载的位置. 我此次的目的是将/dev/sda2 磁盘挂载到/mnt/ ...

  4. Python图表绘制Matplotlib

    引入 import numpy as npimport pandas as pdimport matplotlib.pyplot as plt# 导入相关模块 使用 # 图表窗口1 → plt.sho ...

  5. Python--day61--ORM介绍及Django使用ORM创建表

    ORM: 使用django的ORM详细步骤:(pymysql操作数据库:) #1,自己动手创建数据库(create database 数据库名字;) #2,在Django项目中(setting.py文 ...

  6. linux常用命令速记

    一.命令提示符说明 1. [root@localhost ~]# root: 当前登录用户 localhost: 主机名 ~: 当前所在目录 #: 超级用户提示符($: 普通用户) 2. -rwxr- ...

  7. chrome浏览器频繁卡死

    输入chrome:flag 把对应的GPU选项关掉 或者重装 ,从360软件管理器上装

  8. .map() .filter() .reduce() .includes() .some() .every()的用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 个人脚手架搭建 -- charmingsong-cli

    个人脚手架搭建 -- charmingsong-cli 目的 为了解决多次构建相同功能的项目,在一定程度上需要定制化以及私有化设置 设计 问题 为什么不用现成的脚手架生成? 如果利用vue或者reac ...

  10. C#面试题整理2（带答案）

    一.C# 理论 1.1.简述 private. protected. public. internal.protected internal 访问修饰符和访问权限 private : 私有成员, 在类 ...