1.先分析 # 的作用

1.1. # 的涵义

#代表网页中的位置。其右面的字符就是该位置的标识符。比如，http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。

#是指导浏览器动作的，对服务器完全无效。所以HTTP请求不会包含#及右侧内容

1.2.HTTP请求不包括#

#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。
比如，访问下面的网址，http://www.example.com/index.html#print，浏览器实际发出的请求是这样的：

GET /index.html HTTP/1.1

Host: www.example.com

1.3.#后的字符

在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。
比如，下面URL的原意是指定一个颜色值：http://www.example.com/?color=#fff，但是，浏览器实际发出的请求是：

GET /?color= HTTP/1.1

Host: www.example.com

1.4.改变#不触发网页重载

单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。
比如，从http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2，浏览器不会重新向服务器请求index.html。

1.5.改变#会改变浏览器的访问历史

每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。

1.6.window.location.hash读取#值

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

1.7.onhashchange事件

这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
它的使用方法有三种：

  • window.onhashchange = func;
  • <body onhashchange="func();">
  • window.addEventListener("hashchange"， func, false);

2.那使用还是不使用 # 呢？

2.1.为什么要去除

  • Angular官方指出：如果没有足够使用hash风格（#）的理由，还是尽量使用HTML5模式的路由风格；

  • 如果配置了hash风格，在微信支付或是Angular的深路径依然会出404的问题；

  • 当你需要使用GA等工具时，由于无法获取#号后的URL，导致每次路由切换都给其发送一个路径；

  • '#'有点丑。

2.2.怎样去除？

后端（Tomcat）

Tomcat/conf/web.xml文件上添加

<error-page>

    <error-code></error-code>

    <location>/</location>

</error-page>

3.带‘#’和不带‘#’原理上有什么区别呢？

3.1.这个得先说下什么是前端路由

以前路由都是后台做的，通过用户请求的url导航到具体的html页面，现在我们在前端可以利用 Angular、vue、react等通过配置文件，达到前端控制路由跳转的功能。

前端路由的实现方法：

  1. 通过hash实现 当url的hash发生改变时，触发hashchange注册的回调（低版本没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示。
    使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，我们常说的锚点严格来说应该是页面中的a[name]等元素。

  2. HTML5的history api操作浏览器的session history实现
    基于history实现的路由中不带#，就是原始的路由

3.2 Angular中的路由策略

Angular2 提供的路由策略也是基于上面两个原理实现的，可以在@NgModule中通过providers配置或RouterModule.forRoot()配置：

不使用#：

默认是不使用#（Hash）风格的，即html5路由风格（无#），在无#情况下，后端需要定义能匹配所有页面请求导向index.html页面的路由。

使用 #：

app.module.ts

import { ROUTER_CONFIG } from './app.routes.ts';

@NgModule({

   imports: [

    RouterModule.forRoot(ROUTER_CONFIG)

   //  RouterModule.forRoot(ROUTER_CONFIG, { useHash: true } )   这样写是带#的

  ],

})

或



  import { HashLocationStrategy, LocationStrategy } from '@angular/common';


@NgModule({

  imports:[RouterModule.forRoot(routes)],

  providers:[

     {provide: LocationStrategy, useClass: HashLocationStrategy}

  ]

})




3.3.前端路由的优缺点


优点：




  1. 从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
    2. 

  2. 在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户不能获取到想要的url地址，用前端路由做单页面网页就很好的解决了这个问题。


缺点：


  1. 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。


												


											
Angular2+URL中的 # 引发的思考的更多相关文章
	

    
								
  1. 雷林鹏分享：url中加号引发的错误
		
    刚发现了博客的一个bug,标签页中一些标签带有空格,在url输出中使用了 urlencode 函数进行处理,导致空格被转换成了加号(+),这时通过url访问时会出现错误: 临时解决方法是在urlcod ...
    
		
    2. 
						
  2. 简述C#中IO的应用  RabbitMQ安装笔记  一次线上问题引发的对于C#中相等判断的思考  ef和mysql使用（一）  ASP.NET/MVC/Core的HTTP请求流程
		
    简述C#中IO的应用   在．NET Framework 中． System.IO 命名空间主要包含基于文件(和基于内存)的输入输出(I/O)服务的相关基础类库．和其他命名空间一样． System.I ...
    
		
    3. 
						
  3. 记一次400错误引发的血案（URL中特殊符号的转义/400 bad request错误）
		
    django+nginx+uwsgi部署的站点访问某个URL时发生了400 bad request的错误,而使用django自带的开发版的web server时没有遇到此问题.初步判断是nginx或u ...
    
		
    4. 
						
  4. Spring之LoadTimeWeaver——一个需求引发的思考---转
		
    原文地址:http://www.myexception.cn/software-architecture-design/602651.html Spring之LoadTimeWeaver——一个需求引 ...
    
		
    5. 
						
  5. 由SecureCRT引发的思考和学习
		
    由SecureCRT引发的思考和学习 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMDEwMA==&mid=2652500597&idx=1& ...
    
		
    6. 
						
  6. 解决一道leetcode算法题的曲折过程及引发的思考
		
    写在前面 本题实际解题过程是 从 40秒 --> 24秒 -->1.5秒 --> 715ms --> 320ms --> 48ms --> 36ms -->  ...
    
		
    7. 
						
  7. 【思考】由安装zabbix至排障php一系列引发的思考
		
    [思考]由安装zabbix至排障php一系列引发的思考 linux的知识点林立众多,很有可能你在排查一个故障的时候就得用到另一门技术的知识: 由于linux本身的应用依赖的库和其它环境环环相扣,但又没 ...
    
		
    8. 
						
  8. 由<a href = "#" > 引发的思考
		
    原文:由<a href = "#" > 引发的思考 前阵子在一个移动项目中,通过 <a href = "#" >  的方式 绑定clic ...
    
		
    9. 
						
  9. 曲演杂坛--一条DELETE引发的思考
		
    原文:曲演杂坛--一条DELETE引发的思考 场景介绍: 我们有一张表,专门用来生成自增ID供业务使用,表结构如下: CREATE TABLE TB001 ( ID ,) PRIMARY KEY, D ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python关于类和正则表达（ 编写一个程序(类)）
			
    1.什么是类对象,实例对象 类对象:类名实例对象:类创建的对象 2.类属性: 就是类对象所拥有的属性,它被所有类对象的实例对象所共有,在内存中只存在一个副本.对于公有的类属性,在类外可以通过类对象和实 ...
    
			
    2. 
						
  2. ASP.NET Core开发总结
			
    1.关于浏览器缓存,修改CSS文件和Javascript文件后调试,浏览器不更新问题,解决办法是在link标签和script标签引用的文件名后面添加版本信息如下: <link rel=" ...
    
			
    3. 
						
  3. Overture里镲片的使用
			
    在我们使用Overture进行作曲编曲时,往往会增添很多乐器设备来使我们的乐器更丰富,今天我们来一起看看Overture里镲片怎么使用以及它在Overture的什么位置呢? 镲片,是一种乐器,通常指爵 ...
    
			
    4. 
						
  4. 本地Git仓库和Github仓库的关联
			
    1.我们首先创建一个文件夹(用于保存本地仓) 在我们想要创建的路径下右键鼠标打开Git Bash Here(创建一个文件夹,并进入文件夹) 2.通过命令git init把我们刚才创建的文件夹变成Git ...
    
			
    5. 
						
  5. 【做题】POI2011R1 - Plot——最小圆覆盖&倍增
			
    原文链接 https://www.cnblogs.com/cly-none/p/loj2159.html 题意:给出\(n\)个点,你需要按编号将其划分成不超过\(m\)段连续的区间,使得所有每个区间 ...
    
			
    6. 
						
  6. Kali Linux Xfce版美化虚拟机镜像
			
    起因 这两天来学校把硬盘基本全部清空了,所以以前的虚拟机就需要重新安装了. Kali 一直用的是 xfce 版本,至于为什么用这个版本,是因为我感觉 gnome3 在虚拟机上表现欠佳.当然,默认的 g ...
    
			
    7. 
						
  7. select样式重置
			
                div{                 //用div的样式代替select的样式                 width: 200px;                  ...
    
			
    8. 
						
  8. Linux根目录下各个目录的用途及含义
			
    Linux根目录下各个目录的用途及含义 Linux ./bin 重要的二进制 (binary) 应用程序,包含二进制文件,系统的所有用户使用的命令都在这个目录下. ./boot 启动 (boot) 配 ...
    
			
    9. 
						
  9. C#操作Control异步工具类
			
    /// <summary> /// 异步工具类 /// </summary> public class TaskTools { /// <summary> ///  ...
    
			
    10. 
						
  10. XML 与 XML Schema的使用教程
			
    引言:我写本文的宗旨在于给需要使用XML,而又对XML不是很熟悉的人们提供一种使用思路,而不没有给出具体的     使用方法,至于下文中提到的使用方法,还未尝试过,都是从网上整理而来! 一.概述 什么 ...
    
			
    11.