前端路由实现原理使用前端路由系统，通过改变url来更新页面视图，无需重新请求页面。1.更新页面但不重新请求2.更新url但不重新请求页面3.vue-router三种路由方式hashhistory摘要1.hash实现：hash定义：#本身及其后面的字符都叫hash，get:window.location.hashonhashchange事件触发条件直接改变浏览器地址，在末尾添加或改变#hash；通过更改location.harf或location.hash的值；通过触发带有锚点的链接的点击；浏览器可以向前和向后移动哈希值的变化是由于两个页面地址中的哈希值不同的前提；2、HistoryAPI实现：History.pushState(stateObj,title,url)方法；pushState方法不会触发页面刷新，只会导致history对象发生变化，address栏会响应，浏览器只会刷新前向和后向事件（back()和forward()等）商务旅行。这里的url是通过同源度量来限制的，防止其他脚本模仿其他网站的url来欺骗用户，所以当违反同源策略时，会报错。popstate事件定义：当同一文档（即history对象）的浏览历史发生变化时，会触发popstate事件。Main：只调用pushstate方法或replacestate方法不会触发该事件，只有当用户点击浏览器的前进按钮和后退按钮，或者使用JavaScript调用back、forword、go时才会触发。另外，该事件只针对同一个文档，如果切换浏览器历史导致加载不同的文档，则不会触发该事件。使用方法：使用时，可以为popstate事件指定一个回调函数，这个回调函数的参数是一个event事件对象。它的state属性指向当前url的pushstate和replacestate方法提供的state对象（即这两个方法的第一个参数）。history.back()==history.go(-1);history.froword==history.go(1);hash模式和history模式，这两种模式都是通过浏览器接口实现的，另外Vue-router还为非浏览器环境准备了抽象模式。原理是一个数组栈模拟浏览器历史栈的功能。当然，以上只是一些核心逻辑，鲁邦源码中还有很多辅助逻辑，同样值得学习。3.两种模式的比较。pushstate设置的url可以是任意与当前url同源的url；而hash只能修改#号之后的部分，所以只能设置当前同一个文档的url。history设置的url可以和当前url完全一样，这样也会把记录加入栈中；并且hash设置的新值必须和原来的值不同才会触发记录入栈。pushstate可以通过stateObject向记录中添加任意类型的数据；而hash只能添加短字符串。pushstate可以额外设置title属性，方便后续使用。4.history模式的一个问题我们知道，对于单页应用来说，理想的应用场景是只在进入应用时加载index.html，后续的网络操作Ajax完成，页面不会重新加载-根据url请求，但这是不可避免的。特殊情况，比如用户直接在地址栏输入回车，重启浏览器重新加载应用等。hash模式只是改变hash部分的内容，hash内容不包含在hash中HTTP请求：http://oursite.com/#/user/id//如果重新请求，只会发送http://oursite.com/所以在请求页面的情况下不会有问题根据hash方式的url。而history会将url修改为和正常的强制后台url一样http://oursite.com/user/id这种情况下，重新向后台发送请求，如果后台没有设置对应的/user/id路由处理，会报404错误。官方推荐的方案是在服务器端添加一个覆盖所有情况的候选资源：如果url没有匹配到任何静态资源，应该返回相同的index.html页面，也就是你的app依赖的页面。同时，这样做之后服务器不会返回404错误页面，因为所有路径都返回了index.html文件。为了避免这种情况，在Vue应用中覆盖了所有的路由情况，然后给出一个404页面。或者，如果使用node.js作为后台。可以使用服务端路由来匹配url，没有匹配到路由时返回404，实现fallback。参考资料：1.BrowserHistoryAPI：https://developer.mozilla.org...2.History模式访问404的解决方法：https://router.vuejs.org/zh/g...
