vue-router 实现原理

一、vue-router是什么

　　通过改变URL,在不重新请求页面的情况下，更新页面视图

二、vue-router两种模式

　　更新视图但不请求页面，是前端路由原理的核心之一。目前在浏览器中，实现这一点主要有两种方式：

　　1.hash 模式（默认）

　　2.history 模式 

　　两种模式根据mode参数来决定选择哪一种

在vue项目中，我们设置路由模式代码如下：

const router = new VueRouter({
  //mode: 'hash', //默认 
  mode: 'history',
  routes
})

三、vue-router 中 hash 路由模式实现原理

　　1.hash模式的实现是基于location.hash来实现的。location.hash的值 就是URL 中# 后面的内容作为路径

　　2. 我们可以通过a标签，并设置href属性，当用户点击a标签后，URL的hash值会发生改变；或者通过js对location.hash 进行赋值，改变URL的hash值。

　　2.hash 值的改变，会在浏览器的历史访问记录中增加一个记录。因此我们可以通过浏览器的前进、后退按钮控制hash的改变

　　3.改变hash不会重新加载页面，但会触发hashchange 事件

　　4.监听hashchange事件，在该事件中记录当前的路由地址（loation.hash.slice(1)）

　　5.根据当前的路由地址找到对应的组件进行渲染

四、vue-router 中 history 路由模式实现原理

　　1.history模式是通过HTML5提供的history.pushState()和 history.replaceState() 这两个API来实现的，这两个API可以在不进行页面刷新的情况下，操作浏览器的历史记录。

　　　　window.history.pushState(sateObject,title,url)

　　　　window.history.replcatState(sateObject,title,url)

　　　　stateObject: 状态对象，主要用户popostate事件。当该事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以设置null

　　　　title: 大多数浏览器不支持或者忽略这个参数，最好用null代替

　　　　url:  添加记录的URL

　　2. 浏览器前进或者后退，会触发popstate事件

　　3.监听popstate 事件，在该事件中通过location.pathname拿到当前路由地址，并找到对应组件进行渲染

　　4.history.pushState()或history.replcaeState不会触发popstate事件，所以需要我们手动触发页面跳转