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

一时失言乱红尘 2024-03-31 15:04 72阅读 0赞

## 一、前言 ##

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

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

其中，`/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

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

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

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

## 二、原本的\#号的作用 ##

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

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

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

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

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 = '';

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

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

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

#!/user/homePage?reqMenuId=1001

**现在算是看明白了，前端项目里，就是通过读写`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中\#后的内容）