VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，这个题其实就是考验你的开发经验是否属实。

小白回答：hash模式url带#号，history模式不带#号。

大牛解答：
形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传；
功能上：比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok了

为了达到改变视图的同时不会向后端发出请求这一目的，浏览器当前提供了以下两种支持：

hash模式：即地址栏 URL 中的 # 符号
比如这个 URL：http://www.abc.com/#/hello， hash 的值为 #/hello
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back()、forward()、go() 方法的基础之上，这两个方法提供了对历史记录进行修改的功能。当这两个方法执行修改时，只能改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行

因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.

vue中的router有两种模式：hash模式（默认）、history模式（需配置mode: 'history'）

路由的哈希模式其实是利用了window.onhashchange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，这样能够找到对应页面进行加载

window.addEventListener('hashchange', () => {
   // 把改变后的url地址栏的url赋值给data的响应式数据current，调用router-view去加载对应的页面
   this.data.current = window.location.hash.substr(1)
 
vue中history模式
 
 
HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要前端自己配置404页面。
 
 
pushState() 和 replaceState() 这两个神器的作用就是可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404（因为浏览器一旦刷新，就是去真正请求服务器资源）
 
 
那么如何去解决history模式下刷新报404的弊端呢，这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html），前后端联手，齐心协力做好“挂羊头卖狗肉”的完美特效 
 
 
pushState方法、replaceState方法，只能导致history对象发生变化，从而改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行 
 
 
popstate事件的执行是在点击浏览器的前进后退按钮的时候，才会被触发
 
  
window.addEventListener('popstate', () => {
  this.data.current = window.location.pathname
 
一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来确实有些不太美丽。 
 
 
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。 Vue-router 另外，根据 Mozilla Develop Network 的介绍，调用 history.pushState() 相比于直接修改 hash，存在以下优势: 
 
 
pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL 
 pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中
 pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串
 pushState() 可额外设置 title 属性供后续使用 
 
 
传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发
 
 
而前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换
 
                    VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，这个题其实就是考验你的开发经验是否属实。小白回答：hash模式url带#号，history模式不带#号。大牛解答： 形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传； 功能上：比如我...
				
网页默认是通过URL的hash来改变路径的。但通过hash来改变路径，网页的路径中会出现#，不好看
如果希望使用HTML5的history模式来改变路径：可以通过以下方式：
网页路径就会变成以下样子：
				
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
  mode: 'history',
  routes: [...]
当你使用 h
				
哈希模式（hash mode）
这是开发中的默认模式，在url中永远带着#号，在浏览器方面其支持度极佳，甚至兼容低版本的ie浏览器。说到这里就不得不说一下前端路由的原理：window是可以监听到哈希值的变化的（onhashchage事件），这就意味着：当url中的哈希值发生了变化，无需发起http请求，window也可以监听到这种变化，并按需加载前端的代码块。哈希模式也是当下单页面应用的标配,所谓前端路由的强大之处也就在这里：路由分发不需要服务器来做，前端自己就可以完成。
历史模式（history mode
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
				
最近看本人公司的前端项目，发现url中经常会包含 # 号，如下：
其中，是一个controller的mapping，也是一个controller的mapping，是个参数，的controller会接收这个参数，根据值不同进行不同的处理、展示不同的菜单。但是，其中的，一直搞不懂是什么意思。主要有2个问题：
1.如果点击页面按钮，后的内容就会变化，展示不同的页面
2.但是，如果直接修改浏览器中的url中#后面的内容，页面却不会变，没有任何作用
汇总一下，问题就是：
后的内容有什么用？到底是怎么实现页面跳
				
要解决的场景
现有2个前端应用A和B，域名不同，页面相同(B对A进行了重构)，后续页面功能的开发都会在B应用中，但由于A应用页面的入口已经对外开放，故不能A应用不能下线，期望通过跳转的方式，将所有打到A应用的请求，转发到B应用上。
A应用为纯VUE静态工程，使用Nginx进行负载，URL采用Hash模式，即采用#方式，比如https://xxx.xx.com/myreport/#/myR...
				
碎碎念：之前用react-router的时候直接用的旧项目默认配置，没有仔细去了解为什么url上面会自带#，趁着周末查阅了一下资料，自己总结一下。
一、理解什么是react-router history
直接拿开发文档里的原话：
React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 lo...
				
使用hash模式时，URL的地址请求中会带有#号，此模式背后的原理是onHashChange事件，可以在window对象中上监听该事件，同时hash发生变化的URl会被记录下来，从而使浏览器的前进后退都可以使用，这样页面的状态和URL形成了关联，又被称为前端路由，成为单页面应用的标配。
History路由可以分为两大部分（切换和修改），通过HistoryAPI可以丢掉丑陋的【#】号，但是有...
				
小白回答：hash模式url带#号，history模式不带#号。
形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传；
功能上：比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history
				
项目：laravel + vue 实现前后端分离。vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
hash URL 例如：http://yoursite.com/#/user/id。
history 模式时，URL就像正常的 url，例如...
				
vue-router中的hash模式和history模式是两种不同的路由模式。
hash模式会在URL中添加一个#号，例如http://example.com/#/about。这种模式在不支持HTML5 History API的浏览器中可以正常工作。
history模式会把URL变成真实的路径，例如http://example.com/about。这种模式需要服务端的配合，因为所有的路由请求都会被代理到同一个HTML文件上。
默认情况下，vue-router使用hash模式。但可以通过配置来改变它的行为。