前端路由hash、history、location总结

ゝ一世哀愁。 2023-03-02 13:22 43阅读 0赞

### 一、理解前端路由，前端路由都有哪些？ ###

*  1、理解路由
 *  2、前端路由方法
 *   *  （1）history对象（window.history）
     *  （2）location对象（主要是Hash）
 *  3、hash (locstion对象属性) 和 pushState (history对象属性)对比

# 1、理解路由 #

直接可理解为根据不同的url地址来显示不同的页面或内容的功能，最开始的后端路由有一个很大的缺点就是每次路由切换的时候都需要去刷新页面，然后发出ajax请求，然后将请求数据返回回来，那么这样每次路由切换都要刷新页面对于用户体验来说就会不太友好。因此为了提升用户体验，就有了前端路由，后面也就有了url的改变不会导致页面的刷新的成果。

# 2、前端路由方法 #

## （1）history对象（window.history） ##

*  **window.history.go()**:接收一个整数作为参数，按照当前页面在会话浏览历史记录中的位置进行移动。如果参数为0、undefined、null、false 将刷新页面，相当于执行window.location.reload()方法。如果参数大于浏览器浏览的数量，或小于浏览前的数量的话，什么都不会做。
 *  **window.history.back()**:移动到上一页。相当于点击浏览器的后退按钮，等价于window.history.go(-1)
 *  **window.history.forward()**:移动到下一页，相当于点击浏览器的前进按钮,相当于window.history.go(1)

Html5新增下面两个方法：

*  **window.history.pushState(data, title, ?url)**: 在会话浏览历史记录中添加一条记录。
 *  **window.history.replaceState(data, title, ?url)**:  
    该方法用法和history.pushState方法类似，但是该方法的含义是将修改会话浏览历史的当前记录，而不是新增一条记录。也就是说把当前的浏览地址换成replaceState之后的地址，但是浏览历史记录的总长度并没有新增。

⚠️：执行上面两种方法后，url地址会发生改变。但是不会刷新页面

## （2）location对象（主要是Hash） ##

*  **hash路由模式**：http://xxx.abc.com/\#/xx。 其中有带\#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。（改变hash不会触发页面跳转，因为hash链接是当前页面中的某个片段，所以如果hash有变化，那么页面将会滚动到hash所连接的位置。）

//监听hash值的变化执行相应的函数
    window.addEventListener('hashchange', hashAndUpdate)

*  **location对象的属性总结如下：**

// 完整的url
    location.href  
    
    // 当前URL的协议，包括 :; 比如 https: 
    location.protocol   
    
    // 端口号；比如8080
    location.port
    
    // 主机名：比如：www.baidu.com
    location.hostname
    
    /* 主机名和端口号，如果端口号是80(http)或443(https), 那就会省略端口号，比兔 www.baidu.com:8080 */
    location.host  
      
    // url的路径部分，从 / 开始; 比如 https://www.baidu.com/s?ie=utf-8，那么 pathname = '/s'了
    location.pathname
    
    // 查询参数，从?开始；比如 https://www.baidu.com/s?ie=utf-8 那么 search = '?ie=utf-8'
    location.search
    
    // hash是页面中的一个片段，从 # 开始的，比如 https://www.baidu.com/#/a/b 那么返回值就是："#/a/b"
    location.hash

演示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]

# 3、hash (locstion对象属性) 和 pushState (history对象属性)对比 #

*  hash只能修改url的片段标识符的部分。并且必须从\#号开始，但是pushState且能修改路径、查询参数和片段标识符。pushState比hash更符合前端路由的访问方式，更加优雅(因为不带\#号)。（hash模式在浏览器地址栏中url有\#号这样的，比如(http://localhost:3001/\#/a). \# 后面的内容不会传给服务端，也就是说不会重新刷新页面。并且路由切换的时候也不会重新加载页面。）
 *  hash必须和原先的值不同，才能新增会话浏览历史的记录，但是pushState可以新增相同的url的记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20230208/d8b7d568ce0b4a2ca793889714e99b91.png