前端路由模式hash和history

Posted 2021-01-04 funny-code123

1. hash模式
   hash模式的原理是依据window对象的onhashchange事件进行监听，它的特点是：虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面。
   

   window.onhashchange = function(e){
         console.log(e);
   }

   打印出来的结果
   
   可以通过location.hash获得浏览器url路径中的#部分内容，上图是#bvc,
   如果想获取#后面的内容可通过location.hash.slice(1),上图是bvc

2. history模式
   利用了html5 History Interface中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，他们提供了对当前浏览器进行修改的功能，只是当它们被修改时，虽然浏览器的URL发生
   了变化，但是不会立即向后端服务器发送请求，但是如果点击刷新，就会重新向后端服务器发送请求。
3. 使用场景
   一般情况下，vue-router前端路由模式使用history和hash都可以，在美观上history比hash美观些，因为hash有自己的特定符号#
   相比于hash,history具有以下优势：
   *pushState()设置新的URL可以是任意与当前URL同源的URL，而hash只能改变#后面的内容，因此只能设置与当前URL同文档的URL
   *pushState()设置的URL与当前URL一模一样时也会被添加到历史记录栈中，而hash模式中，#后面的内容必须被修改才会被添加到新的记录栈中
   *pushState()可以通过stateObject参数添加任意类型的数据到记录中，而hash只能添加短字符串
   *pushState()可额外设置title属性供后续使用
   但是通过URL向后端发起HTTP请求的时候，history，hash具有以下区别：
   *hash模式下，只有#符号之前的内容才会包含在请求中被发送到后端，也就是说虽然后端没有对路由全覆盖，但是不会返回404错误
   *history模式下，前端的URL必须和向发送请求后端URL保持一致，否则会报404错误