HTML5History模式有哪些-

vue-router默许hash模式——运用URL的hash来模拟一个完备的URL，于是当URL转变时，页面不会从新加载。要是不想要很丑的hash，我们可以用路由的history模式，这种模式充分应用history.pushStateAPI来完成URL跳转而不必从新加载页面。constrouternewVueRouter({mode:his vue-router 默许 hash 模式 —— 运用 URL 的 hash 来模拟一个完备的 URL，于是当 URL 转变时，页面不会从新加载。

要是不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分应用 history.pushState API 来完成 URL 跳转而不必从新加载页面。

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

当你运用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不外这种模式要玩好，还需要后台配置支撑。由于我们的利用是个单页客户端利用，要是后台没有准确的配置，当会员在阅读器直接拜访 http://oursite.com/user/id 就会返回 404，这就欠好看了。

所以呢，你要在办事端添加一个遮盖所有状况的候选资源：要是 URL 匹配不到任何静态资源，则应当返回统一个index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子

  RewriteEngine On
  RewriteBase /  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f  RewriteCond %{REQUEST_FILENAME} !-d  RewriteRule . /index.html [L]

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)

https://github.com/bripkens/connect-history-api-fallback
告诫
给个告诫，由于这么做今后，你的办事器就不再返回 404 差错页面，由于关于所有途径都会返回 index.html 文件。为了不这种状况，你应当在 Vue 利用里面遮盖所有的路由状况，然后在给出一个 404 页面。

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

或者，要是你是用 Node.js 作后台，可以运用办事端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

以上就是HTML5 History模式有哪些的细致内容，更多请关注 百分百源码网 其它相干文章！