vue router原理（简单易懂的）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue router原理（简单易懂的）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍

前端路由就是用户事件和事件处理函数之间的对应关系，也就是不同的用户事件要对应不同的页面内容

Vue Router其实也是一个插件，那就肯定需要利用vue.use()进行注册，但是在注册时需要调用插件的install方法，所以Vue Router中也定义了install()

两种模式

hash模式

URL中#后面的内容作为路径地址，当地址改变的时候不会向服务器发送请求，但是会触发onhashchange事件。监听onhashchange事件，在该事件中记录当前的路由地址，然后根据路由地址找到对应组件，重新渲染。

history模式

主要依赖几个api，

通过history.pushState()方法改变地址栏，并且将当前地址记录到浏览器的历史记录中。当前浏览器不会向服务器发送请求
监听popstate事件，可以发现浏览器历史操作的变化，记录改变后的地址，单击前进或者是后退按钮的时候触发该事件

History模式需要服务器的支持，他不像hash模式，有#作为标识，他的地址和正常的URL地址是一样的，所以如果在History模式下，肯定在服务器端是找不到页面的，所以需要在服务端做配置，应该除了静态资源外都返回单页应用的index.html，浏览器接收index.html页面后，会判断路由地址，发现地址并不为index.html,所以会加载该地址对应的组件内容。

例子（以history模式为例）

假如页面中有个声明式导航<router-link to=' '/>，当点击它的时候，会发生什么事情呢？

首先要知道<router-link/>也是一个组件，他被定义在Vue Router当中，它会传入路径参数，最终会被渲染为a标签。为了生成a标签的虚拟dom，这里得使用render函数，而不能用template模板

不能用template模板原因？
用template模板会报错，vue是有两个版本的（运行时版本和完整版）；
（1）运行时版：不支持template模板，需要打包的时候提前编译。
（2）完整版：包含运行时和编译器，体积比运行时版大10k左右，程序运行的时候把模板转换成render函数。性能低于运行时版本。
但是使用vue-cli创建的项目默认为运行时版本

点击了<router-link to=' '/>会触发一个函数，在这个函数中要做几件事情，通过history.pushState()改变地址栏，并修改存放当前地址路径的变量（响应式的）。

这样在<router-view/>中会渲染对应的内容，<router-view/>同样是一个组件，被定义在Vue Router中，它通过当前的地址路径找到对应的组件，并通过render函数转化成虚拟dom，至此就完成了一个具有最简单功能的Vue Router

在history模式下，另外一个比较重要的history API就是popstate()，它是用来去监听浏览器历史操作变化的，当浏览器历史操作变化时，需要修改存放当前地址路径的变量，这样页面组件才能发生响应的变化