前言：看完此文章，让你对前端路由原理有一个比较深的了解，必能掌握路由原理，面试必过
路由实现原理
通过改变URL，在不重新请求页面的情况下，更新页面视图
前端路由的两种模式
Hash------默认值，利用 URL 中的hash("#") 、History------利用URL中的路径（/home）
在项目中如何设置路由模式
const router=new VueRouter({
mode:'history',
routes:[...]
})
通过model来设置路由模式，默认是Hash模式
下面说下两种路由模式是如何实现的
Hash
hash是URL中hash（#）以及后面的那部分，常用作锚点在页面内进行导航，改变URL中的hash- 通过
onhashchange事件监听URL的变化。改变URL的方式有以下几种：1.通过浏览器前进后退改变URL，2.通过标签改变URL，3.通过window。location改变URL。这几种情况改变URL都会触发hashchange事件
History
history提供pushstate和replacestate两个方法，这两个方法改变URL的path部分不会引起页面的刷新
2.history提供类似onhashchange事件的popstate事件，但是popstate事件有些不同，通过浏览器前进后退改变URL时会触发popstate事件，通过pushstate/replace或标签改变URL不会出发popstate事件，好在我们可以拦截pushstate/relacestate的调用和标签的点击事件在检测URL变化。所以监听URL变化可以实现，只是没有hashchange那么好用
最后说下两种模式的区别
1.pushstate设置新的URL可以是与当前URL同源的任意URL，而hash只可以修改#后面的部分，只能设置与当前同文档的URL
2. pushstate通过state.object可以添加任意类型的数据到记录中，而hash只可以添加短文字符串
3. pushstate可以额外设置title属性供后续使用
4. history模式则会将URL修改的就和正常请求后端的URL一样，如果后端没有配置对应的ULR路由处理，则会返回404错误
注意：此内容属实比较枯燥，没有花里胡哨，但内容比较实用，希望大家勿喷
