Vue-router原理:如何实现更新视图但是不重新请求页面

参考:
【前端路由】Vue-router 中hash模式和history模式的区别
浅谈vue-router原理
从vue-router看前端路由的两种实现
vue-router工作原理概述和问题分析

vue-router主要通过hash模式和history模式来实现前端路由,更新视图而不重新请求页面。

  • hash:即地址栏URL中的#符号
  • history-利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。pushState()不会触发页面刷新,只是导致history对象发生变化,地址栏会有反应

我们在开发的时候默认使用hash模式(其url后永远带着#号),那
1、为什么要使用history模式?

  • history模式没有#号,看起来更规范更正常,适合推广宣传
  • 开发app的适合会有分享页面,将这个页面分享到第三方的app里时,有的app不允许url带有#符号

但是,
2、history模式也存在一个问题
在访问二级页面的时候,做刷新操作,会出现404错误,此时需要后端人员配置一下代理服务器(apache或者nginx)的url重定向,重定向到你的首页路由上。history模式下,前端的url必须和后端发起请求的url一致,如http://www.baidu.com/a/ ,如果后端缺少对/a的处理,将返回404错误。
(.1) history模式下配置Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

(2) history模式下配置nginx

location / {
  try_files $uri $uri/ /index.html;
}

3、hash模式不会返回404错误,为什么?
hash模式下,仅hash符号之前的内容会被包含在请求中,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。即hash虽然出现在URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。

总结:

传统的路由:当用户访问一个url时,对应的服务器会接收这个请求,然后解析url中的路径,从而执行对应的处理逻辑。这样就完成了一次路由分发
前端路由:不涉及服务器,是前端利用hash或者HTML5的history API来实现的,一般用于不同内容的展示和切换。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值