vue-router的两种模式的区别

 我来答
机器1718
2022-07-27 · TA获得超过6839个赞
知道小有建树答主
回答量:2805
采纳率:99%
帮助的人:161万
展开全部

vue-router有两种模式,hash和history模式。

hash模式,默认是hash模式
hash的原理是onhashchange事件 使用URL的hash来模拟一个完整的URL,当URL改变的时候,页面不会加载,也就是单页面应用,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就会刷新页面,并且会触发hashchange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作

对于hash模式会创建hashHistory对象,在访问不同的路由的时候会发生两件事件 使用push将新路添加到路径后面后者使用replace()替换到当前的路由

history路由:
主要使用HTML5的pushState()和replaceState()这两个api来实现的, api分为两大部分 切换和修改,
切换历史状态:

修改历史状态:
包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕 刷新 f5 ,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
所以,如果你想在github上搭一个单页博客,就应该选择hash模式。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式