前端路由原理

vue-router—前端路由的实现原理

参考

• https://www.cnblogs.com/FHC1994/p/12408313.html
• https://www.cnblogs.com/tugenhua0707/p/10859214.html#_labe2

一、前端路由和后端路由是什么？？

• 前端路由

  前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。也就是说，通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图

• 后端路由

  浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面,

  意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。

二、 单页面应用和多页面应用

• 单页面应用

  • 即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了
  • 原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了

• 多页面应用

  • 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

  • 原理：用一些超链接来实现页面切换和跳转的

三、实现原理

vue-router 提供了三种模式来实现前端路由：1.hash模式 2.history模式 3.abstract模式。hash模式与history模式，这两种模式都是通过浏览器接口实现的，除此之外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。这里主要讲解hash模式和history模式实现前端路由的原理。

1.hash模式：监听浏览器地址hash值变化，执行相应的js改变网页内容

• 本身以及它后面的字符称作hash，可通过window.location.hash属性读取
• url中可以带有一个hash，比如 http://localhost:9000/#/song 中的hash值就是 #/song
• 监听hashchange事件触发：
  • 直接更改浏览器地址，在最后面增加或者改变#hash
  • 通过改变locatin.href或者location.hash的值（window.locat