前端框架里url中#的真正作用

一、前言

最近看本人公司的前端项目，发现url中经常会包含 # 号，如下：

http://www.xxx.com/login#!/user/homePage?reqMenuId=1001
1

其中，/login是一个controller的mapping，/user/homePage也是一个controller的mapping，reqMenuId=1001是个参数，/user/homePage的controller会接收这个参数，根据值不同进行不同的处理、展示不同的菜单。

但是，其中的#!，一直搞不懂是什么意思。

主要有2个问题：
1.如果点击页面按钮，#!后的内容就会变化，展示不同的页面
例如：

http://www.xxx.com/login#!/user/edit?reqMenuId=11111
http://www.xxx.com/login#!/config/list?reqMenuId=2222
1
2

2.但是，如果直接修改浏览器中的url中#后面的内容，页面却不会变，没有任何作用

例如修改浏览器的url，从
http://www.xxx.com/login#!/user/homePage?reqMenuId=1001
改为
http://www.xxx.com/login#!/user/edit?reqMenuId=11111
页面没有任何变化
1
2
3
4
5

汇总一下，问题就是：
#后的内容有什么用？到底是怎么实现页面跳转的？

二、原本的#号的作用

百度发现：
1.# 是用来指导浏览器动作的，主要用来让浏览器自动将#后的位置滚动至可视区域。
例如访问这个url：

http://www.xxx.com/index.html#user
1

其中，index.html中如果有这个标签的话：

1

浏览器就会自动把屏幕滚动到这个标签位置，让它能够看到。

2.# 对后端无效；# 号后的内容不会发送给后端；改变 # 号后的内容、不触发网页重载、也不会重新给后端发送请求。

总之，找了半天，还是没有明白前端项目是怎么用#号后的内容实现页面跳转的…

三、框架中#号的作用

1.发现，前端项目是easyUI的项目，其中有个文件...\src\main\webapp\static\js\main.js，这个文件里有这样一段方法：

		    //这里获取的是#后的内容
			src = fnSrc(tab);
			//这里获取的是reqMenuId里的值，截取的是：=后面的内容->末尾
			var reqMenuId = src.substring(src.indexOf('=')+1);
			//修改id为reqMenuId的标签的value为取到的值
			$("#reqMenuId").val(reqMenuId);
			//如果src存在，就设置这个，最后看到的完整的url就有#!了
			if (src)
				window.location.hash = '!' + src; 
			//如果src等于某个值，就设置这个为空	
			if (src == wrapper.settings.homeTabUrl)
				window.location.hash = '';
1
2
3
4
5
6
7
8
9
10
11
12

其中，有个window.location.hash，这个值可读可写，就是在这里修改了这个值；
例如，url为：

http://www.xxx.com/login#!/user/homePage?reqMenuId=1001
1

此时执行window.location.hash，获取到的内容就是：

#!/user/homePage?reqMenuId=1001
1

现在算是看明白了，前端项目里，就是通过读写window.location.hash，获取到其中的内容、然后给后端发请求、收到响应、修改前端页面的内容、模拟了页面跳转的。

当修改window.location.hash的值，就会导致url里#后的内容发生改变；
但是直接修改url里#后的内容，并不会加载或改变前端页面、也不会给后端发送请求。

2.vue前端项目中，访问的地址也会带有#号，是因为VUE使用了HASH模式。

同理，不同的页面#后的内容也不同，但是直接修改url中#后的内容并不能跳转到不同的页面。

原理也是框架js中对window.location.hash进行了存取、模拟了不同页面的跳转。

如果不想有#：修改路由Router的mode为history即可。

三、总结

1.原本的url中#号的作用是，让浏览器自动将#号后的位置滚动至可视区域。（但是看起来一般不用这个功能）
2.改变#号后的内容，不会让前端页面重新加载，也不会给后端发送请求。（除了自动滚动，没什么用）
3.前端框架中，通过对window.location.hash的存取、就实现了页面的跳转。（也会改变url中#后的内容）