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
    评论
vue-router的路由模式有三种:哈希模式(hash mode)、历史模式(history mode)和抽象模式(abstract mode)。 1. 哈希模式:默认使用的路由模式,通过改变URL中的hash值来进行路由的切换。例如:http://example.com/#/home。 实现方式:通过监听URL中hash值变化的事件,当hash值改变时,动态渲染相应的组件内容。 原理:浏览器会将hash值的变化当作页面的锚点变化来处理,不会重新发送请求,而是通过监听hashchange事件来更新URL对应的视图。 2. 历史模式:通过修改URL的路径来进行路由的切换,去除URL中的hash值。例如:http://example.com/home。 实现方式:通过HTML5的history API(pushState和replaceState方法)来修改URL路径并将路由信息保存在浏览器的history栈中。同时需要配合服务器端的配置,将所有的URL请求都指向根页面原理:history API可以修改URL路径并保持在浏览器的历史记录中,当URL发生改变时,浏览器会发送请求到服务器,服务器通过配置将所有的URL请求都指向根页面,然后由vue-router解析路由信息并呈现对应的视图。 3. 抽象模式:不依赖于浏览器的URL,可以将路由信息保存在任意位置,并通过切换路由信息来改变页面内容。 实现方式:通过自定义路由器(Router)和路由(Route)对象来管理路由状态,并通过编程方式来切换路由信息。 原理:抽象模式不依赖于浏览器的URL,可以将路由信息保存在任意位置,例如内存或者状态管理库中。通过切换路由信息,可以触发相应的组件渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值