Vue2面试题：说一下路由模式hash和history的区别？

? ? 在单页面应用SPA中，路由描述的是URL与视图之间的映射关系，这种映射是单向的，即URL变化引起视图更新（无需刷新页面）。??

? ? 1、hash模式

? ? ? ? 原理：

? ? ? ? ? ? 用 url + #后面的hash值 来模拟一个完整的url，直接刷新页面不会导致浏览器向服务器发出新的请求，路由切换时不会

? ? ? ? ? ? 当调用$router.push方法，会改变hash值触发hashchange事件，前进到指定的url。vue-router会根据url做路由匹配来修改页面内容，实现路由切换的效果

? ? ? ? ? ? 改变hash值触发hashchange事件，hashchange事件对象中会记录变化的url。点击浏览器的前进后退，会改变hash值，实现路由切换的效果

? ? ? ? 特点：

? ? ? ? ? ? 地址栏有#，影响美观，直接刷新页面不会报404

2、history模式

? ? ? ? 原理：

? ? ? ? ? ? 用 url + 路径 真正实现一个完整的url，直接刷新页面会导致浏览器向服务器发出新的请求，路由切换时不会

? ? ? ? ? ? 当调用$router.push方法，会改变路径调用pushState方法，前进到指定的url。vue-router会根据url做路由匹配来修改页面内容，实现路由切换的效果

? ? ? ? ? ? 改变路径调用pushState方法，pushState方法中会记录变化的url。点击浏览器的前进后退 或者 手动调back、forward、go方法，会触发popstate事件，实现路由切换的效果

? ? ? ? 特点：

? ? ? ? ? ? 地址栏没有#，不影响美观，直接刷新页面会报404，需要后端在Nginx中做代理地址的配置