本篇内容主要讲解“vue中history和hash的区别有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中history和hash的区别有哪些”吧!
区别:1、hash路由再地址栏URL上有“#”,而history路由没有;2、进行回车刷新操作时,hash路由会加载到地址栏对应的页面,而history路由一般会出现404错误;3、hash支持一些低版本的浏览器,而history不支持。
本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。
vue中history和hash的区别
hash路由在地址栏URL上有#,用 window.location.hash 读取。而history路由没有会好看一点
我们进行回车刷新操作,hash路由会加载到地址栏对应的页面,而history路由一般就404报错了(刷新是网络请求,没有后端准备时会报错)。
hash路由支持低版本的浏览器,而history路由是HTML5新增的API。
hash的特点在于它虽然出现在了URL中,但是不包括在http请求中,所以对于后端是没有一点影响的,所以改变hash不会重新加载页面,所以这也是单页面应用的必备。
history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法,它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。
history的这种模式需要后台配置支持。比如:当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404
到此,相信大家对“vue中history和hash的区别有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!