vue-router两种模式有什么区别

区别:1、history的url没有“#”号,而hash有;3、history修改的url可以是同域的任意url,而hash是同文档的url;3、相同的url,history会触发...

区别:1、history的url没有“#”号,而hash有;3、history修改的url可以是同域的任意url,而hash是同文档的url;3、相同的url,history会触发添加到浏览器历史记录栈中,而hash不会触发。

vue-router两种模式有什么区别插图1

vue-router两种模式

1.hash模式

vue-router默认的是hash’[hæʃ] '模式,使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页面应用了。当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不会发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作。

对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:

HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由。

vue-router两种模式有什么区别插图3

2.history模式

因为HTML5标准的发布,多了两个API,pushState() 和 replaceState()。通过这两个API

(1)可以改变url地址且不会发送请求。

(2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改。

除此之外,还有popState(),当浏览器跳转到新的状态时,将触发popState事件。

添加/修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

//逐条添加历史记录条目window.history.pushState(stateObject,title,URL)//修改历史记录window.history.replaceState(stateObject,title,URL)

切换历史记录

包括back、forward、go三个方法,对应浏览的前进(forward)、后退(back)、跳转(go)操作。

区别:

history和hash都是利用浏览器的两种特性实现前端路由,history是利用浏览历史记录栈的API实现,hash是监听location对象hash值变化事件来实现

history的url没有’#'号,hash反之

history修改的url可以是同域的任意url,hash是同文档的url

相同的url,history会触发添加到浏览器历史记录栈中,hash不会触发。

history和hash的优点和缺点

history比hash的url美观(没有’#'号)

history修改的url可以是同域的任意url,hash则只能是同文档的url

history模式往往需要后端支持,如果后端nginx没有覆盖路由地址,就会返回404,hash因为是同文档的url,即使后端没有覆盖路由地址,也不会返回404

hash模式下,如果把url作为参数传后端,那么后端会直接从’#‘号截断,只处理’#'号前的url,因此会存在#后的参数内容丢失的问题,不过这个问题hash模式下也有解决的方法。

history模式怕啥

不怕前进,不怕后退,就怕刷新,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。

在history模式下,你可以自由的修改path。history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。

当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/33471.html;
(0)
上一篇 2023年1月17日 下午4:17
下一篇 2023年1月19日 下午4:16

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部