hash和history
hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由
形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传;
功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合,让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok了
hash 模式
hash 模式是一种把前端路由的路径用井号 #
拼接在真实 URL 后面的模式。当井号 #
后面的路径发生变化时,浏览器并不会重新发起请求,而是会触发 hashchange
事件。 改变 hash 不会重新加载页面
路由的哈希模式其实是利用了window.onhashchange事件,也就是说你的url中的哈希值(#后面的值)如果有变化,就会自动调用hashchange的监听事件,在hashchange的监听事件内可以得到改变后的url,这样能够找到对应页面进行加载
-
优点:浏览器兼容性较好,连 IE8 都支持
-
缺点:路径在井号
#
的后面,比较丑
history 模式
history API 是 H5 提供的新特性 pushState() 和 replaceState() 方法 , 两个方法应用于浏览器的历史记录栈,在当前已有的 back()、forward()、go() 方法的基础之上,这两个方法提供了对历史记录进行修改的功能 ,允许开发者直接更改前端路由, 浏览器不会向后端发送请求,也不会触发popstate事件的执行 ,即更新浏览器 URL 地址而不重新发起请求
浏览器在刷新的时候,会按照路径发送真实的资源请求,如果这个路径是前端通过 history API 设置的 URL,那么在服务端往往不存在这个资源,于是就返回 404 了。
-
优点:路径比较正规,没有井号
#
-
缺点:兼容性不如 hash,且需要服务端支持,否则一刷新页面就404了
理解可能不那么深刻 .. 只是自己整理的笔记 .