前言

在学习Vue-router之前，我们先来简单了解一下前端路由的原理

前端路由

服务端控制路由是通过点击页面发送http请求Html资源实现页面内容切换，随着单页面应用框架越来越火，前端路由也应用而生。前端路由分为两种模式：哈希模式和历史模式。

哈希模式

通过监听浏览器#后面的变化，浏览器为我们提供了原生的监听事件hashChange事件来实现前端路由的切换，它可以监听：

• 点击a标签改变浏览器地址
• 浏览器的前进后退行为
• 通过window.location方法改变浏览器地址

历史模式

历史模式的实现得益于Html5中新增的一些API可以实现对history中栈中内容的操作。

• 跳转API：window.history.back()、window.history.go()、window.histoy.forward()
• 修改历史记录： history.pushState()、history.replaceState()

history.pushState()、history.replaceState()都是HTML5新增的API，他们的作用很强大可以做到改变浏览器地址却不刷新页面。他们本身不会触发popstate事件，只有在做出浏览器动作时才会触发该事件。pushState函数向浏览器的历史堆栈中压入一个url为设定值的记录，并改变历史堆栈的当前指针指向栈顶，replaceState函数与pushState的区别在于替换当前的栈顶的url为输入的url，不会改变历史堆栈中的当前指针

前端路由 VS 后端路由

服务器控制路由：

• 优点：安全性好 SEO好
• 缺点：服务器压力大，不利于用户体验 前端路由缺陷：
• 使用浏览器的前进、后退键会重新发送请求来获取数据，不能合理的利用缓存