<!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. AtCoder Regular Contest 058

    这个应该是第一场有英文的atcoder吧??不过题解却没有英文的... 从前往后慢慢做... C こだわり者いろはちゃん / Iroha's Obsession 数据范围这么小,直接暴力 #inclu ...

  2. [C++] 自动关闭右下角弹窗

    最近腾讯.迅雷等各种客户端,都越发喜欢在屏幕的右下角弹框了. 有骨气的人当然可以把这些软件卸载了事,但是这些客户端在某些情况下却又还是有用的.怎么办呢? 作为码农,自己实现一个自动关闭右下角弹窗的程序 ...

  3. mysql-python安装

    操作系统:ubuntu16.04-gnome 首先要安装mysql数据 sudo apt install mysql-server 我们使用pip进行安装第三方模块 系统python版本为2.7.12 ...

  4. H3C PPP MP配置示例三

  5. vue-router在新窗口打开页面

    1. <router-link>标签实现新窗口打开: <router-link target="_blank" :to="{path:'/app/dat ...

  6. [转]分布式session的几种实现方式

    我们应当对产生的Session进行处理,通过粘性Session,Session复制或Session共享等方式保证用户的体验度. 以下我将说明5种Session处理策略,并分析其优劣性. 第一种:粘性s ...

  7. Python--day42--mysql创建用户及授权

    1,打开mysql数据库命令:mysql -u root -p 2,创建数据库create database db2; 2,删除数据库drop database db2; 2,展示有多少个文件夹:sh ...

  8. tf.reduce_sum()

    #axis 表示在哪个维度进行sum操作,不写代表所有维 #keep_dims 是否保留原始数据维度 reduce_sum( input_tensor, axis=None, keep_dims=Fa ...

  9. dotnet 通过 WMI 拿到显卡信息

    本文告诉大家如何通过 WMI 拿到显卡信息 如果使用的是 dotnet core 请先引用 Microsoft.Windows.Compatibility 才可以使用 WMI 代码 通过下面的代码可以 ...

  10. 【2016常州一中夏令营Day1】

    Problem 1. suffix给定一个单词,如果该单词以 er. ly 或者 ing 后缀结尾,则删除该后缀(题目保证删除后缀后的单词长度不为 0),否则不进行任何操作.Input输入一行,包含一 ...