前端路由实现原理 - 王汉镇的博客

前端路由的方式有两种

history路由：history.pushState()+popState事件

hash路由：location.hash+hashchange事件

history路由


history API是HTML5新增的API，跟路由有关的两个API是 history.pushState()和history.repalceState()

这两个api都可以操作浏览器的历史记录，而且不会引起刷新。不过前者会向浏览器新增一条历史记录，而后者是直接替换当前的历史记录。

这两个api都接受三个参数

  • 状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。
  • 标题（title） — FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
  • 地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

除此之外，官方文档提供了 popstate 事件，当我们在历史记录中切换时就会产生 popstate 事件。对于触发 popstate 事件的方式，各浏览器实现也有差异，我们可以根据不同浏览器做兼容处理。

hash路由


我们经常在url中看到 # 符号，代表的就是哈希路由，使用Vue-Router的时候默认就是使用hash路由，url会以 http(s)://***/#/***的形式出现。

我们可以通过监听hashchange事件，来达到前端路由的效果

index.html









1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26





<!DOCTYPE html>
<html lang="en">
<head>
  <title>Route</title>
  <style>
    .main {
      display: block;
    }
    .A {
      display: none;
    }
    .B {
      display: none;
    }
  </style>
</head>
<body>
  <div class="main">
    <a href="#/A">去到A路由</a>
    <a href="#/B">去到B路由</a>
  </div>
  <div class="A">A路由页面</div>
  <div class="B">B路由页面</div>
  <script src="Route.js"></script>
</body>
</html>

Route.js









1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41





function Router() {

  // 路由表

  this.routes = {},

  // 当前hash路由值

  this.currentUrl = ''

}


Router.prototype.route = function (path, callback) {

  this.routes[path] = callback || function() 大专栏  前端路由实现原理 - 王汉镇的博客an class="p">{}
				


				
时间： 2024-11-03 18:25:34 

		

		


	
	
	

		


		
前端路由实现原理 - 王汉镇的博客的相关文章


								

		

			

                在IT巨人的肩膀上继续前行 - 王崇杰的博客
			

		

		

									

				读一本好书,会让人有一种神清气爽的感觉.互联网相关技术虽然发展飞速,但是有些知识高度抽象,历久弥新,已成经典.有些书适合精读,有些书适合泛读,下面会列一些我读过,觉得还不错的书跟大家分享,其中不乏经典,部分书籍翻阅不下10遍(如算法导论).书中的内容不见得工作中都会用到,但是能开阔视野,打开思路.面对工作中的问题,如设计中间件.架构或系统时,可以有更好的大局观和技术感觉.全栈是一种理念,DevOps其实更需要一专多长,T型人才是互联网企业所更青睐的.有理论,有模式,有实践,脚下的路才会走得更坚实			

		

	

				

		

			

                记一次前端跨域的问题 - 礼锐的博客
			

		

		

									

				浏览器实现对不同源的网址的资源获取的行为.详见维基百科.这篇文章的起因来源于需要向别的部门进行资源请求, 不在同一个域, 资源请求不到, 等了两天还没解决后便通过node的express来代理请求, 解决了这个问题. 定义(WHAT) 什么叫不同源(满足下列条件任意一个) 不同的域名(domain) baidu.com 和 google.com 这样名称不相同的就叫不同 domain 不同的端口 localhost:8000 和 localhost:3000 如果不写端口号, 根据协议有默认值			

		

	

				

		

			

                原生JS实现一个简单的前端路由（原理）
			

		

		

									

				说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示. 直接看代码或许更直观. 1 function Router() { 2 this.routes = {}; 3 this.currentUrl = ''; 4 } 5 Router.prototype.route = function(path, callback) {			

		

	

				

		

			

                前端路由的原理
			

		

		

									

				什么是路由?简单的说,路由是根据不同的 url 地址展示不同的内容或页面 使用场景?前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由. 前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的.在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器. 两种实现前端路由的方式HTML5 History两个新增的API:history.pushState 和			

		

	

				

		

			

                zend studio 10破解/汉化 - 永不停歇 - 博客频道 - CSDN.NET
			

		

		

									

				Zend Studio 10正式版破解及汉化 2013年03月12日 ⁄ PHP ⁄ 共 975字 ⁄ 字号 小 中 大 ⁄ 暂无评论 ⁄ 阅读 6,828 次 今天下载了Zend Studio 10正式版来学习下PHP,200多兆的软件下了我一个下午居然还要收费,真是惨绝人寰啊!寻思着在我大天朝居然还有这种事,百度之. 首先你得下载<a href='http://pan.baidu.com/s/1pJuTn9x'>Zend Studio 10</a>正式版,为了以后版本更新而破解			

		

	

				

		

			

                Vue 之前端路由
			

		

		

									

				前端路由的原理 根据锚点的不同,走不同的路由,驱动不同的组件,实现单页面的展示. V_router的基本使用 创建路由对象 注意: -------------------------------------------------------------------------------- 命名路由 原文地址:https://www.cnblogs.com/swearBM/p/10738801.html			

		

	

				

		

			

                值得收藏的前端大牛博客
			

		

		

									

				转自https://github.com/jikeytang/front-end-collect 张鑫的博客 http://www.zhangxinxu.com/life/about/ 前端观察: http://www.qianduan.net/page/4 中文博客 名称 活跃度 原创度 维护者 其他 W3Cplus ★★★★★ ★★★★★ 携程 @大漠 国内最优秀的前端博客,原创居多 前端观察 ★★★★☆ ★★★★☆ 腾讯 ISUX @神飞 曾经最优秀,最近更新不频繁了 腾讯web前端 Al			

		

	

				

		

			

                前端资源(优秀网站、博客、以及活跃开发者)
			

		

		

									

				查看原文 @forked from hjzheng/front-end-collect 在前端路上摸索前行,在这里分享自己长期关注的前端开发相关的优秀网站.博客.以及活跃开发者.欢迎更新.以下各排名不分先后顺序. 前端收集图谱(点击查看) 聚合&&周报订阅 名称 订阅地址 介绍 Html5 Weekly http://html5weekly.com/ Html 技术类 CSS Weekly http://css-weekly.com/   Javascript Weekly http://			

		

	

				

		

			

                前端路由简介以及vue-router实现原理
			

		

		

									

				后端路由简介 路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口(或443)有请求过来,并解析url路径 根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等) 浏览器根据数据包的 Content-Type 来决定如何解析数据 简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页