2021-10-13

路由
前端路由的本质是监听url变化，然后匹配路由规则，无需刷新就可以显示相应的页面，目前单页面路由主要有两种方式：hash 模式和history 模式

1. hash 模式
   location.hash 设置/获取hash
   hashchange事件监听url变化，解析url实现页面路由跳转
   url hash 就是类似于：http://www.xxx.com/#/login。主要通过location.hash设置hash Url，也就是url的符号#后面的值。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。当哈希值发生变化时，不会向服务器请求发送数据，可以通过hashchange事件来监听hash的变化，实现相应的功能。

2. history 模式
   因为 HTML5 标准发布，多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。history 模式主要通过history.pushState/replceState向当前历史记录中插入状态对象state，在浏览器前进、回退、跳转等动作发生时触发popState事件，此时可以通过解析popState事件回调函数的event参数中的state对象，或者解析当前页面url来实现路由。

history对象：
window.history属性指向history对象，它表示当前窗口的浏览历史
history对象保存了当前窗口访问过的所有页面网址，以下是常用API
-history.length:返回历史记录中的网页数量
-history.forward():前进
-history.back():后退
-history.go(num):前往相对于自身的第num个(前后取决于正负)页面
-history.state:history堆栈最上层的状态值
-history.pushState(stateObj,title,url):向当前历史记录插入一个状态值对象stateObj,并在网址后面添加url,title无实际意义.
-history.replaceState(stateObj,title,url):修改history对象的当前记录

事件
-poptate:仅当浏览器动作出现时(前进、后退)才触发，pushState和replaceState方法并不会触发该事件，其回调函数参数event的state属性指向当前历史记录的state对象

两者的区别：
用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

方式的异同：
页面手动刷新，hash模式不会向服务器发送请求，history模式会
hash模式下url中的哈希值不会发送到服务器，history模式url全部会发送至服务器
设置location.hash和pushState都不会导致浏览器刷新
设置location.hash的时候会触发hashchange事件和popstate事件
仅当pushState函数设置url参数的值为hash格式时,浏览器动作发生会触发hashchange事件，尽管location.hash值为空
a标签锚点跳转可以设置hash，触发hashchange事件

实现前端路由的两种方式及其差异
前端路由简介以及vue-router实现原理