Vue   发布时间:2022-04-21  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了浅析前端路由简介以及vue-router实现原理大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

路由这个概念最先是后端出现的。在以前用模板引擎开发@L_944_0@时,经常会看到这样

大致流程可以看成这样:

  1. 浏览器发出请求
  2. 服务器监听到80端口(或443)有请求过来,并解析url路径
  3. 根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等)
  4. 浏览器根据数据包的 Content-Type 来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。

前端路由

1. hash 模式

随着 ajax 的流行,异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。 类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容。但是这样存在一个问题,就是 url 每次变化的时候,都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下,保证页面的不刷新。在 2014 年之前,大家是通过 hash 来实现路由,url hash 就是类似于:

这种 #。后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新@L_944_0@。另外每次 hash 值的变化,还会触发 hashchange 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新@L_944_0@部分内容的操作:


大佬总结

以上是大佬教程为你收集整理的浅析前端路由简介以及vue-router实现原理全部内容,希望文章能够帮你解决浅析前端路由简介以及vue-router实现原理所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。