HTML5 History模式是什么-木庄网络博客

本文摘自PHP中文网，作者一个新手，侵删。

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 依赖的页面。

后端配置例子

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

nginx

阅读剩余部分

zip压缩和解压技术在html5中的应用的代码案例（图）

详解html5 postmessage解决跨域通信的问题

html5 main标签是什么意思？html5 main标签作用的详细介绍

h5移动端各种各样的列表的制作方法(二)

【h5开发工具】2017最好用的10种html5应用开发工具推荐

html5怎么实现图片转圈的动画效果

快速开发基于html5网络拓扑图应用的详解（图文）

后盾网html5视频教程

h5同层video播放器接入实例分享

更多相关阅读请进入《History》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » HTML5 History模式是什么

HTML5 History模式是什么

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论