本文目录
- browserrouter as router和hashrouter as router的区别
- hashhistory 与 browserhistory有什么区别
- history路由和hash的区别
- vue-router中history和hash两种模式的区别的区别
browserrouter as router和hashrouter as router的区别
mpletely independent. At school, she always studied hard. Most of all she learned to be self-reliant
hashhistory 与 browserhistory有什么区别
hashHistory 和 browserHistory 的区别：react-router提供了三种方式来实现路由，并没有默认的路由，需要在声明路由的时候，显式指定所使用的路由。//v1.x《Router/》//v2.0.0// hash historyimport { hashHistory } from ’react-router’《Router history={hashHistory} /》browserHistoryhashHistorycreateMemoryHistory官方推荐使用browserHistory使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis使用browserHistory,浏览器的url是这样的：/user/liuna这样看起来当然是browerHistory更好一些，但是它需要server端支持。使用hashHistory时，因为有 # 的存在，浏览器不会发送request,react-router 自己根据 url 去 render 相应的模块。使用browserHistory时，从 / 到 /user/liuna, 浏览器会向server发送request，所以server要做特殊请求，比如用的 express 的话，你需要 handle 所有的路由 app.get(’*’, (req, res) =》 { ... })，使用了 nginx 的话，nginx也要做相应的配置。如果只是静态页面，就不需要用browserHistory,直接hashHistory就好了。
history路由和hash的区别
随着HTML5的historyAPI发布后，基于其诞生了新的路由模式 相比于传统的hash路由，收集了一下网上很棒的三篇总结 原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件 优点: 1.只需要前端配置路由表, 不需要后端的参与 缺点: 查看浏览器是否支持history，只需在console里面输入history即可 原理： history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法，它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。 优点: 1.符合url地址规范, 不需要#, 使用起来比较美观 缺点: 1.在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误 2.兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持. 个人以为还是用hash比较好，毕竟用户不会去关注url长啥样，hash路由能节约资源请求。并且除非自己前后端一起写了，不然难免前后端url不完全同步，vue-router默认也是hash模式。但也有例外，比如要根据权限生成不同的路由时就使用history模式 最后推荐一篇对vue-router的源码剖析
vue-router中history和hash两种模式的区别的区别
说到hash和history的区别，最直观的就是在url中， hash带了#，history没有# ，它们两个是路由配置mode的两个选项。 前端路由的核心是在 改变视图的同时不会向后端发出请求 ，浏览器提供的这两种支持就是为了达到这一目的。 1.hash------就是指url中#号以及后面的字符 ①hash也称作锚点，其中的#和css里面的#是一个意义，它本身是用来做页面定位的，可以是对应的id元素显示在可视区域内。 ②我们可以通过 window.location.hash 获取hash值 ③hash中有一个 hashchange 事件，当hash值发生变化时会触发这个事件，语法是： window.onhashchange=person 或者 《body onhashchange=’person’》 ,这个事件 会覆盖 现有的事件处理程序，如果在想要添加一个新的事件处理程序的前提下，还不会覆盖原有的事件处理程序，可以通过’ addEventListener ’ 另外hashchange事件有两个属性： ***隐藏网址*** 2.history------它直接指向History对象，它表示当前窗口的浏览历史，History对象保存了当前窗口访问过的所有页面网址 ①history.length 属性保存着历史记录的url数量，初始值是 1，如果当前窗口访问了四个网址，那么history.length=4 ②可以在浏览器历史之间移动 go() 接收一个整数为参数，移动到该整数指定的页面，比如 history.go(1) 相当于 history.forward(),history.go(-1) 相当于 history.back(),history.go(0) 相当于 刷新当前页面 back() 移动到上一个访问页面，等同于浏览器的后退键,常见的返回上一页就可以用back()，是从浏览器缓存中加载，而不是重新要求服务器发送新的网页 forward() 移动到下一个访问页面，等同于浏览器的前进键 ③history.pushState() ------在浏览器中添加历史记录，这个方法 不会触发页面刷新 ，只是导致了history对象发生变化，地址栏会有反应。它有三个参数： state: 一个与指定网址相关的状态对象， popState 事件触发时，该对象会传入回调函数，如果不需要这个对象，此处可填null title : 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null url: 新的网址，必须与当前页面处在同一个域 ，浏览器的地址栏将显示这个网址 如果pushState的url参数，设置了一个新的锚点值（即hash），并不会触发hashChange事件，如果设置了一个跨域网址，则会报错。 ④history.replaceState()------ 这个方法的参数和pushState()方法一摸一样，区别是它修改浏览器历史当中的记录 ⑤history.state 返回当前页面的state对象 ⑥每当同一个文档的浏览历史（即history）出现变化时，就会触发popState事件 仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有 用户点击浏览器后退和前进按钮时，或者使用js调用back、forward、go方法时才会触发 。另外该事件只针对 同一个文档 ，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发 使用的时候，可以为popState事件指定回调函数，回调函数的参数是一个event事件对象，它的 state属性 指向pushState和replaceState方法为当前url所提供的状态对象（即这两个方法的 第一个参数 ）。 ⑦history.scrollRestoration = ’manual’; 关闭浏览器自动滚动行为 history.scrollRestoration = ’auto’; 打开浏览器自动滚动行为(默认)一般场景下，hash和history都可以使用 history ①优点： 如果你更 在意颜值 ，那么就使用没有#的history模式，这种模式充分利用history.pushState API来完成url的跳转，而且 不需要重新加载页面 ，通过pushState()设置的url可以是和当前url同源的任意url，甚至可以与当前url一模一样,它通过stateObject参数可以添加 任意类型 的数据到记录中，它还可以 额外设置title属性 ，提供给后续使用。 利用pushState和replaceState方法，对历史记录进行修改 缺点： 就是如果通过url向后端发起请求时，尤其是在用户手动输入url 回车或者重新刷新（重启）浏览器 的时候， 会报404错误 ，找不到指定路由，需要 后端 去指向正确的路由匹配, 比如当url不匹配时跳转到index.html，虽然通过以上两种方法改变了当前的url， 但是浏览器不会立即向后端发送请求 hash ***隐藏网址*** 缺点：hash 设置的新值必须与原来的不一样才会出发动作并且将记录添加到栈中，它只可以修改#后面的部分，所以只能设置与当前url同文档的url，只有 短字符串 才可以添加到记录中
