「梳理」hash和history区别

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天

关于路由切换有两种方式： 1. 改变浏览器地址， 2. 内容区切换

1. 主要名词解释

• 「 hash模式 」和「 history模式 」都是属于「浏览器」自身的特性

• 「 hash 」关键是 hashchange 事件

  • hashchange(e): e包含oldURL 和newURL两个属性

  // 1. 获取内容区域
  var contentBox = document.getElementById('contentBox')
  
  // 2. 监听到hash值变化， 触发hashchange事件
  window.addEventListener('hashchange', function(e) {
      console.log(oldURL, e.newURL)
      
      // 3. 动态改变内容区域
      contentBox.innerHTML = '当前路由的内容'
  })
  

• 「 history 」关键是H5的api之 pushState 和 replaceState

  • 特殊场景（forward、back和go）: 只是「 浏览器历史记录」的前进、后退， 不能跳转到『指定url』。 这三个动作会触发 「onpopstate」 事件, 再做渲染操作

  • pushState 和 replaceState： 可以跳转到指定的页面， 再做渲染操作

  • replaceState： A页面-B页面-C页面， 如果B页面使用了replaceState, 结果：记录变成：A页面-C页面

   // 1. 获取内容区域
    var contentBox = document.getElementById('contentBox')
    
    // 2-1. 通过pushState 和 replaceState 进行路由跳转(第一种情况处理)
    go（） {
        window.history.pushState(state, '标题', url)
        if (url === ‘/a’) {
            3. 动态改变内容区域
            contentBox.innerHTML = 'a的内容'
        } else if (url === ‘/b’) {
            contentBox.innerHTML = 'b的内容'
        } else {
            contentBox.innerHTML = '初始内容'
        }
    }
    
    // 2-2. 考虑前进和后退，通过popState事件触发处理（第二种情况处理）
    window.addEventListener(‘popstate’. function(e) {
        console.log(e.state)
        if (e.state.page === ‘/a’) {
            3. 动态改变内容区域
            contentBox.innerHTML = 'a的内容'
        } else if (e.state.page === ‘/b’) {
            contentBox.innerHTML = 'b的内容'
        } else {
            contentBox.innerHTML = '初始内容'
        }
    })

2.hash和history主要区别

区别	Hash	History
形式	url永远带「#」号：  http://127.1.1.1:9090/#/home,  开发默认 「#」后面是hash值	url不带「#」号： http://127.1.1.1:9090/home
原理	hash值变化，会触发「onhashchange」事件。 在windows上能监听这个对象	利用H5的api:  pushState和 replaceState更改浏览器「url」， 修改「页面内容」，页面不会刷新。 window.history.pushState(data, title) :向历史记录中追加一条记录 window.history.repalceState(data, title):替换当前页在历史记录中的信息 window.addEventlistener(‘onpopstate’, () => {} ): 监听浏览器的「前进」「后退」
优点	1. 不向服务器发请求，不需要服务器支持 2. 「兼容性」好，支持IE8	1. 地址优雅
缺点	1. 地址不够优雅 2. 当和第三方app交互的时候，有些app是不支持hash的 3.做路由跳转，本身具有的锚点功能就不能用 4. 不利于SEO	1. 「兼容性」不如hash 2. 生产环境，浏览器刷新时，会按照真实资源请求，但服务端往往不存在，所以页面会报404 解决方式：需要后端nginx重定向配置