history 路由原理

history模式

如果不希望看到丑陋的#可以使用history模式，其原理依赖于 history.pushState函数
a标签点击以后，如果没有#必然会页面跳转发起请求
使用pushState函数可以改变url比如 /abc而不会发起请求
js通过location.pathname获取该值 /abc做页面局部的替换

实现方式

history.pushState(url带的参数,标题,修改的路由) a标签获取herf属性的路由,增加点击事件，去除a标签的默认行为，使用该api进行调用判断herf上路由，点击后加载组件

前进后退会触发该函数，也可以对前进后退进行操作

获取当前路由名称

let hash = window.location.hash; hashrouter名称
let path = window.location.pathname;

history 路由原理相关推荐

浅谈前端路由原理hash和history
浅谈前端路由原理hash和history
从路由原理出发，深入阅读理解react-router 4.0的源码
react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面.路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新.通过前 ...
单页面应用的前端路由原理是什么？
前置知识在了解单页面应用的前端路由原理之前,我们先了解下什么事单页面应用,什么是多页面应用,他们之间的区别又是什么? 什么是单页面应用? 单页面应用指的是第一次进入页面的时候会请求一个html文件, ...
Vue踩坑日记： history路由打包后无法加载
前言: 在使用Vue框架时避免不了会使用到vue-router工具,Vue-router提供了Hash和History两种路由模式.默认为Hash模式,但此模式下URL中会存在 "#&quo ...
VRRP浮动路由（浮动路由原理，了解HSRP路由选举原理，实验过程与总结）
文章目录前言单一链路存在的问题 HSRP是思科的私有协议 HSRP (热备份路由选择协议)介绍 VRRP浮动路由原理 Master路由器选举原理浮动路由原理实验详解实验目的实验过程主机设 ...
路由（一）——路由原理及静态路由
路由(一)--路由原理及静态路由路由原理路由(一)--路由原理及静态路由一.路由原理路由的工作原理最优路由的选择二.路由表简介路由表的形成三.路由协议分类四.静态路由默认路由浮 ...
[html] 使用history路由方式时，你有自己动手配置过服务器端吗？为什么要配服务器端？怎么配？
[html] 使用history路由方式时,你有自己动手配置过服务器端吗?为什么要配服务器端?怎么配? history路由会请求服务器,因此需要服务器配合返回一个固定的index.html页面以ng ...
mysql 分区 mycat 分片_Mysql系列六：（Mycat分片路由原理、Mycat常用分片规则及对应源码介绍）...
一.Mycat分片路由原理我们先来看下面的一个SQL在Mycat里面是如何执行的: select * from travelrecord where id in(5000001, 10000001) ...
history 路由 vs hash 路由 vs location.href 实现跳转
location.href 直接页面跳转了 => 重新请求页面了 -> 刷新 history => 改变 url 但是页面不刷新 ,没有重新请求后端的页面,用到了 history a ...

history 路由原理

history 路由原理相关推荐

最新文章

热门文章