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

hash模式,默认是hash模式

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

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

利:

  1. 无刷新体验,这个应该是最显著的有点,由于路由分发直接在浏览器端完成,页面是不刷新,对用户的响应非常及时,因此提升了用户体验
  2. 完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整

弊:

  1. 首屏较长,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长
  2. 不利于 SEO,单页页面,数据在前端渲染,就意味着没有 SEO,或者需要使用变通的方案

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

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

修改历史状态:
包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕刷新f5因为刷新是实实在在地去请求服务器的,当我们进入到子路由时刷新页面,web容器没有相对应的页面此时会出现404,所以后端需要配置将任意页面都重定向到 一个index.html,把路由交由前端处理。

在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
所以,如果你想在github上搭一个单页博客,就应该选择hash模式。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值