Skip to content

【Vue Router】hash模式和history模式有何区别? #24

@Dliling

Description

@Dliling

官网介绍~

hash模式
hash是默认模式,很直观地看到URL上带了一个#号,当URL改变时,页面不会重新加载~
原理是利用window可以监听onhashchangge事件,若有变化则可以做一些事情。
支持低版本浏览器和IE浏览器。

问题:
在微信中,后端无法获取 # 后面的参数。

history模式
利用history.pushState来完成URL跳转,在当前历史记录上进行修改,虽然改变了当前URL,但不用重新加载页面。这个地址看着比较正常,如https://a.com/user/id,由于是单页面应用,如果后台没有正确配置,访问时直接404了!官网提示我们,这种模式要玩好,需要后台配置支持!所以需要一个兜底,当URL匹配不到任何资源时,返回index.html或者一个错误页面。
history对于新的URL限制较少,详细可见MDN

  1. 新的URL可以是与当前URL同源的任意URL,而hash只能修改 # 后面的部分;
  2. 可以将任意数据和新的历史记录相关联,而hash,要把所有相关数据编码为短字符串;
  3. 可额外设置title属性,hash不能。
  4. 新的URL与旧的URL一样时,也可以被加入历史记录;hash的值只有改变时,才能创建新的历史记录。

问题:
Html5新推出的API,需要考虑浏览器兼容性。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions