正文

前端路由hashhistory原理(代码片段)

wsk1576025821  wsk1576025821  2022-12-10  378

关键词：

本文参考https://www.cnblogs.com/tugenhua0707/p/10859214.html

先来看下后端路由的实现方式:

1. 浏览器向服务器发出请求。
2. 服务器监听到80端口，如果有请求过来，那么就解析url地址。
3. 服务器根据客户端的路由配置，然后就返回相应的信息(比如html字符串、json数据或图片等)。
4. 浏览器根据数据包的 Content-Type来决定如何解析数据。

缺点: 每次路由切换的时候都需要去刷新页面，然后发出ajax请求，然后将请求数据返回回来，那么这样每次路由切换都要刷新页面对于用户体验来说就不好了。因此为了提升用户体验，我们前端路由就这样产生了。它就可以解决浏览器不会重新刷新了。

那么前端路由也有2种模式，第一种是hash模式，第二种是history模式。我们来分别看下这两种知识点及区别如下：

1. hash模式

hash路由模式是这样的：http://xxx.abc.com/#/xx。有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。比如我们可以如下简单的监听：

function hashAndUpdate () 
   // todo 匹配 hash 做 dom 更新操作


window.addEventListener(‘hashchange‘, hashAndUpdate);

// 完整的url
location.href  

// 当前URL的协议，包括 :; 比如 https:     
location.protocol   

/* 主机名和端口号，如果端口号是80(http)或443(https), 那就会省略端口号，比兔 www.baidu.com:8080 */
location.host  

// 主机名：比如：www.baidu.com
location.hostname
  
// 端口号；比如8080
location.port

// url的路径部分，从 / 开始; 比如 https://www.baidu.com/s?ie=utf-8，那么 pathname = ‘/s‘了
location.pathname

// 查询参数，从?开始；比如 https://www.baidu.com/s?ie=utf-8 那么 search = ‘?ie=utf-8‘
location.search

// hash是页面中的一个片段，从 # 开始的，比如 https://www.baidu.com/#/a/b 那么返回值就是："#/a/b"
location.hash

hash 和 pushState 对比有如下缺点：

1. hash只能修改url的片段标识符的部分。并且必须从#号开始，但是pushState且能修改路径、查询参数和片段标识符。pushState比hash更符合前端路由的访问方式，更加优雅(因为不带#号)。

2. hash必须和原先的值不同，才能新增会话浏览历史的记录，但是pushState可以新增相同的url的记录

2. history模式

HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。提供了如下事件：

window.addEventListener(‘popstate‘, function(e) 
  console.log(e)
);

history提供了两个操作历史栈的API: history.pushState 和 history.replaceState

history.pushState(data[,title][,url]); // 向历史记录中追加一条记录

history.replaceState(data[,title][,url]); // 替换当前页在历史记录中的信息。

如上html5中新增了上面这两个方法，该两个方法也可以改变url，页面也不会重新刷新。下面我们也可以来做个demo，来监听下popstate事件，现在在我js里面放入如下js代码:

window.addEventListener(‘popstate‘, function(e) 
  console.log(e)

hash模式的特点：

hash模式在浏览器地址栏中url有#号这样的，比如(http://localhost:3001/#/a). # 后面的内容不会传给服务端，也就是说不会重新刷新页面。并且路由切换的时候也不会重新加载页面。

history模式的特点：

浏览器地址没有#，比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。

前端路由跳转基本原理(代码片段)

目前前端三杰Angular、react、vue 都推介单页面应用SPA开发模式，在路由切换时替换DOMTree中最小修改的部分DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-ro... 查看详情

浅谈前端路由原理hash和history(代码片段)

浅谈前端路由原理hash和history🎹序言🎸一、前端路由原理1、SPA2、什么时候需要路由🎷二、Hash模式1、定义2、网页url组成部分（1）了解几个url的属性（2）演示3、hash的特点🎺三、History模式1、定义... 查看详情

前端路由简介以及vue-router实现原理(代码片段)

后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样http://www.xxx.com/login大致流程可以看成这样：浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路... 查看详情

前端路由简介以及vue-router实现原理(代码片段)

微前端实现原理研究总结(代码片段)

微前端实现原理研究总结前言微前端实现方案子应用生命周期改写子应用子应用打包主应用中注册子应用主应用和子应用的路由模式主应用路由拦截主应用获取子应用并执行生命周期函数主应用加载并解析子应用获取html文件内... 查看详情

微前端实现原理研究总结(代码片段)

前端路由原理(代码片段)

...端路由：早期传统MVC网站路由都是服务端主导，前端通过不同URL请求后端，后端框架有专门的路由模块用来匹配URL地址，然后根据不同地址和参数调用相关处理程序并返回html页面给前端。前端路由：后来前后... 查看详情

前端笔记整理（vue）(代码片段)

Vue学习总结MVVM原理了解响应原理v-model双向绑定原理生命周期nextTick在哪里使用？原理是？vue.use是干什么的？原理是什么？Vue路由vue路由模式路由导航方式Vue-router有几种钩子函数？组件通信axios拦截器配置webpac... 查看详情

前端路由原理及vue-router介绍(代码片段)

前端路由原理本质就是监听URL的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式hashhistorywww.test.com/##/ 就是HashURL，当 ## 后面的哈希值发生变化时，不会向服务器... 查看详情

我对于react-router路由原理的学习(代码片段)

目录react-router依赖基础--historyreact-router是如何实现URL与UI同步一react-router依赖基础--historyhistory是一个独立的第三方js库，可以用来兼容不同的浏览器、不同环境下对历史记录的管理。具体可以分为以下几类：hashHistory：通常应用... 查看详情

浅谈前端路由原理hash和history(代码片段)

react路由器中的hashHistory和browserHistory有啥区别？

】react路由器中的hashHistory和browserHistory有啥区别？【英文标题】：WhatisthedifferencebetweenhashHistoryandbrowserHistoryinreactrouter?react路由器中的hashHistory和browserHistory有什么区别？【发布时间】：2016-07-1707:49:51【问题描述】：我已经google了... 查看详情

vue专题-路由系统(代码片段)

...为了更好的结合，本文详细介绍了前后端分离架构之后，前端如果实现路由控制，即Vue路由系统。Vue路由系统VueRouter实现原理VueRouter的实现原理是根据监控锚点值的改变，从而不断修改组件内容来实现的，我们来试试不使用VueRou... 查看详情

vue路由原理

Vue路由原理目前实现路由的方式有两中，vue通过参数mode来设置，默认是hash模式。利用URL中的hash(‘#’)来实现利用Historyinterface在HTML5中新增的方法history对应的是HTML5History对象，hash对应的是HashHistory对象，abstract对应的是AbstractHist... 查看详情

spa路由实现的基本原理(代码片段)

1.SPA路由实现的基本原理前端单页应用实现路由的策略有两种，分别是基于hash和基于HistoryAPI基于hash通过将一个URLpath用#Hash符号拆分。—浏览器视作其为虚拟的片段。最早前端路由的实现就是基于location.hash来实现的，有这样几个... 查看详情

vue-router(代码片段)

...实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1.1后端路由后端路由是根据不同的用户URL请求，返回不同的内容，本质就是URL请求地址与服务器资源之间的对应关系。由服务器端进行实现，并完成资... 查看详情

react路由(代码片段)

React路由：一、前端路由的工作原理：其实是利用前端中的BOM对象中的history这个属性来进行的实现。二、实现前端路由的两种方法：方法一：直接使用H5推出的history身上API。但是有些旧的浏览器可能不支持。这里... 查看详情