如何去除vue项目中的 # --- History模式

　使用vue-cli搭建的环境，在配置好路由以后，能够看到下面的状况：

   

　可是不难发现#的出现真的很丑陋，而且也不知道这是什么做用？ 

　因此就去Stack Overflow上搜索了，果真还有~  看来Stack Overflow是真的强大，你在项目中遇到的问题实际上在so上都已经被问过而且解决了，这不： 　  　　

  这是最高票的回答，即在vue2中将mode模式设置为history，试过以后确实奏效！

　可是知道这样能够解决问题，殊不知道为何，这是不行的，　随着链接，咱们看到了文档。

　

　因此这篇文章也就是引伸到文档的理解了，你们能够直接去看文档。

　

---

---

---

　　

　对于vue开发的单页面应用，咱们在切换不一样的页面的时候，能够发现html永远只有一个，这也真是称之为单页面的缘由，而vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。由于对于正常的页面来讲，更换url必定是会致使页面的更换的， 而只有更换url中的查询字符串和hash值得时候才不会从新加载页面。 这里也就是这个道理。

　可是#这种形式真的很丑！  因此，若是不想要，可使用路由的history模式！！！ 这种模式充分利用了history.pushState API来完成URL的跳转而不须要从新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

　使用这种模式以后，就没有#了，而是能够像使用正常的url进行访问了。 　　

　　不过这种模式要玩好，还须要后台配置支持。由于咱们的应用是个单页客户端应用，若是后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就很差看了。

　　因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

 

　　注意：目前我所作的项目的后端没有支持此种方式，因此仍是先使用#的方式进行开发。

　　

警告

给个警告，由于这么作之后，你的服务器就再也不返回 404 错误页面，由于对于全部路径都会返回 index.html 文件。为了不这种状况，你应该在 Vue 应用里面覆盖全部的路由状况，而后在给出一个 404 页面。

const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] })

或者，若是你是用 Node.js 做后台，可使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。