vue-router两种模式的区别

本文介绍了vue-router的两种模式:hash模式和history模式。hash模式利用URL的hash来模拟完整URL,改变#后面的部分不会触发浏览器请求,适合单页应用;history模式依赖HTML5的pushState和replaceState API,URL看起来更像传统服务器路由,但需要服务器配置以避免404错误。刷新页面时,history模式需要服务器支持,否则可能导致404。
摘要由CSDN通过智能技术生成

vue-router两种模式的区别

1.hash模式

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

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

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

在这里插入图片描述

2.history模式

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

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

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

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

添加/修改历史状态

包括了pushState,replaceState</

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dnhz-w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值