vue-router
有两种模式: hash
和 history
。
Hash模式
hash
模式是一种把前端路由的路径用井号 #
拼接在真实 url
后面的模式。当井号 #
后面的路径发生变化时,浏览器并不会重新发起请求,而是会触发 onhashchange
事件。
url的属性
属性 | 含义 |
location.protocal | 协议 |
location.hostname | 主机名 |
location.host | 主机 |
location.port | 端口号 |
location.patchname | 访问页面 |
location.search | 搜索内容 |
location.hash | 哈希值 |
hash的特点
-
hash变化会触发网页跳转,即浏览器的前进和后退。
-
浏览器兼容性较好,连 IE8 都支持
-
hash
可以改变url
,但是不会触发页面重新加载(hash的改变是记录在window.history
中),即不会刷新页面。也就是说,所有页面的跳转都是在客户端进行操作。因此,这并不算是一次http
请求,所以这种模式不利于SEO
优化。hash
只能修改#
后面的部分,所以只能跳转到与当前url
同文档的url
。 -
hash
通过window.onhashchange
的方式,来监听hash
的改变,借此实现无刷新跳转的功能。 -
hash
永远不会提交到server
端(可以理解为只在前端自生自灭)。
History模式
history API 是 H5 提供的新特性,允许开发者直接更改前端路由,即更新浏览器 URL 地址而不重新发起请求。
总结一下 history 模式的优缺点:
- 优点:路径比较正规,没有井号
#
- 缺点:兼容性不如 hash,且需要服务端支持,否则一刷新页面就404了