vue.js，如何删除网址中的hashbang #

vue.js，如何删除网址中的hashbang

export default new VueRouter({
  mode: 'history',
  routes
});

Vue的History模式和Hash模式的区别理解

在url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，典型的比如：回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash（哈希），大型框架的路由系统大多都是hash实现的

看完上面那段话，可能有人会有疑问：URL中的#是什么，如何用hash实现前端路由呢？

首先我们来说一下URL中的井号（其实也叫 hash）

URL中的hash（井号）

1.#的含义

#代表网页中的一个位置，其右边的字符，就是该位置的标识符。比如

http://www.example.com/index.html#print

就是代表index.html中的print位置。浏览器会自动把print位置滚动到页面可视区域内

设置方法：

step1：设置一个锚点<a href="#print">定位到print位置
step2：在页面需要定位的内容加上id="print"。例如：<div id="print"></div>

测试：step1设置的锚点，step2中id为print的内容会滚动到页面顶端（可观察滚动条的距离）。同时，页面的url末端中会出现#print的哈希值。

浏览器向服务端发送请求时，只会把#前的链接发送给服务端，所以后端同学并不需要处理，并且页面可以刷新不会返回404之类的恶心页面。是不是感觉很方便呢~

但是这个#号往往会给我们来带一些奇怪的bug，比如生成二维码的时候会自动过滤掉#后面的参数啊，微信登录，已经分享的时候都会把#后面的参数或者路径都过滤掉，这样我们就很不方便了！！！！ 好难受的~~

History模式跟Hash最大的区别就是没有# 并且请求服务器的时候发送一整条url 搞到服务器不认识 报错404 就是这么恶心，所以需要后端同学配合一下