快捷導(dǎo)航

Vue路由模式中的hash和history模式詳細(xì)介紹

更新時(shí)間：2022年09月30日 11:02:33 作者：月光曬了很涼快

VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會(huì)包含在http請(qǐng)求中，并且不會(huì)重新加載頁(yè)面，而使用history模式的話，如果前端的url和后端發(fā)起請(qǐng)求的url不一致的話，會(huì)報(bào)404錯(cuò)誤，所以使用history模式的話我們需要和后端進(jìn)行配合

1. 路由概念

路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系，根據(jù)不同的URL請(qǐng)求，返回對(duì)應(yīng)不同的資源。那么url地址和真實(shí)的資源之間就有一種對(duì)應(yīng)的關(guān)系，就是路由。

SPA(Single Page Application)單頁(yè)面應(yīng)用程序,基于前端路由而起：整個(gè)網(wǎng)站只有一個(gè)頁(yè)面，通過(guò)監(jiān)聽(tīng)地址欄中的變化事件，來(lái)通過(guò)Ajax局部更新內(nèi)容信息顯示、同時(shí)支持瀏覽器地址欄的前進(jìn)和后退操作。

前端路由有兩種模式：hash 模式和 history 模式。

2. hash模式

概述：

hash 路由模式是這樣的：http://xxx.abc.com/#/xx。有帶#號(hào)，后面就是 hash 值的變化。改變后面的 hash 值，它不會(huì)向服務(wù)器發(fā)出請(qǐng)求，因此也就不會(huì)刷新頁(yè)面。并且每次 hash 值發(fā)生改變的時(shí)候，會(huì)觸發(fā) hashchange 事件。因此我們可以通過(guò)監(jiān)聽(tīng)該事件，來(lái)知道 hash 值發(fā)生了哪些變化。

window.addEventListener('hashchange', ()=>{
	// 通過(guò) location.hash 獲取到最新的 hash 值
    console.log(location.hash);
});

使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash路由</title>
</head>
<body>
  <ul>
    <li>
      <!-- 通過(guò)標(biāo)簽導(dǎo)航  聲明式導(dǎo)航 -->
      <a href="#/home" rel="external nofollow" >首頁(yè)</a>
      <!-- location.href='#/home' js方式進(jìn)行導(dǎo)航切換 編程式導(dǎo)航 -->
    </li>
    <li>
      <a href="#/about" rel="external nofollow" >關(guān)于</a>
    </li>
  </ul>
  <div id="routerView"></div>
  <script>
    const routerRender = () => {
      // 每次都置空hash
      let html = ''
      // 根據(jù)地址欄hash值的不同返回對(duì)應(yīng)的資源
      try {
        // 如果hash值為空就給一個(gè)home
        let hash = location.hash || '#/home'
        html = component[hash.slice(2)]()
      } catch (error) {
        html = `<div>404</div>`
      }
      // 渲染到頁(yè)面上
      document.getElementById('routerView').innerHTML = html
    }
    const component = {
      home() {
        return `<div>home頁(yè)面</div>`
      },
      about() {
        return '<div>關(guān)于頁(yè)面</div>'
      }
    }
    window.onload = function () {
      routerRender()
    }
    // 事件，監(jiān)聽(tīng)地址欄中的hash值變化，實(shí)現(xiàn)回退
    window.addEventListener('hashchange', routerRender)
  </script>
</body>
</html>

注意：hash 模式既可以通過(guò)聲明式導(dǎo)航，也可以通過(guò)編程式導(dǎo)航，上面的案例展示的是聲明式導(dǎo)航。而下面將要講到的 history 模式只能通過(guò)編程式導(dǎo)航實(shí)現(xiàn)，因?yàn)?history 是 js 對(duì)象。

優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：hash模式兼容性很強(qiáng)，刷新瀏覽器，頁(yè)面還會(huì)存在

缺點(diǎn)：地址欄不優(yōu)雅，有#存在，不利于seo，記憶困難

3. history路由模式

概述：

HTML5的History API為瀏覽器的全局history對(duì)象增加了該擴(kuò)展方法。它是一個(gè)瀏覽器（bom）的一個(gè)接口，在window對(duì)象中提供了onpopstate事件來(lái)監(jiān)聽(tīng)歷史棧的改變，只要?dú)v史棧有信息發(fā)生改變的話，就會(huì)觸發(fā)該事件。

history.pushState({},title,url); // 向歷史記錄中追加一條記錄
history.replaceState({},title,url); // 替換當(dāng)前頁(yè)在歷史記錄中的信息。
window.addEventListener('popstate', function(event) {
  console.log(event)
})

使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>history模式</title>
</head>
<body>
  <ul>
    <li>
      <a href="/home" rel="external nofollow" >首頁(yè)</a>
    </li>
    <li>
      <a href="/about" rel="external nofollow" >關(guān)于</a>
    </li>
  </ul>
  <div id="routerView"></div>
  <script>
    const component = {
      home() {
        return `<div>home頁(yè)面</div>`
      },
      about() {
        return '<div>關(guān)于頁(yè)面</div>'
      }
    }
    const routerRender = pathname => {
      let html = ''
      try {
        html = component[pathname]()
      } catch (error) {
        html = `<div>404</div>`
      }
      document.getElementById('routerView').innerHTML = html
    }
    // history模式，它的路由導(dǎo)航，只能通過(guò)js來(lái)完成 , history它是js對(duì)象
    // 給鏈接添加點(diǎn)擊事件
    document.querySelectorAll('a').forEach(node => {
      node.addEventListener('click', function (evt) {
        // 阻止a標(biāo)簽的默認(rèn)跳轉(zhuǎn)行為
        evt.preventDefault()
        // 跳轉(zhuǎn)到指定的地址，能回退
        // history.pushState
        // 跳轉(zhuǎn)到指定持址，不能回退
        // history.replaceState
        history.pushState({}, null, this.href)
        // 渲染
        routerRender(this.href.match(/\/(\w+)$/)[1])
      })
    })
    // 在網(wǎng)頁(yè)加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻渲染 home 中的標(biāo)簽
    window.onload = () => {
      routerRender('home')
    }
    // 回退
    window.addEventListener('popstate', function () {
      routerRender(location.pathname.slice(1))
    })
  </script>
</body>
</html>