vue的路由实现模式 hash 与 history

使用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页面。

猜你喜欢

转载自blog.csdn.net/vampire10086/article/details/109097998