使用vue-cli在创建工程时,如果勾选了vue-router,后面会提示是否使用history模式。如果输入 n ,将使用hash模式。
那么这两种模式有什么区别呢?
1.hash模式:浏览器上方地址栏中的符号“#”以及“#”之后的字符被称为hash,window.location.hash 可以读取
hash模式特点:hash在URL中,不被包含在HTTP的请求体中。如 https://www.xxx.com
用于指导浏览器动作,对服务器安全无用。hash不会重加载页面。
对于后端来说,即时没有做到对路由的全覆盖,也不会返回 404 Error。
2.history模式:采用H5的新特性。提供pushState()、replaceState()对浏览器历史记录进行修改,以及popState事件对于状态变更的监听。
history模式下,前后端的URL必须一致,如https://www.xxx.com/items/id
如果后端没有对于items/id的处理,将会返回 404 。
所以,使用时要注意,服务端增加一个覆盖所有情况的候选资源,如果url没有匹配到资源,应该返回同一个index.html页面。