Vue路由模式中的hash和history模式詳細介紹

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

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

1. 路由概念

路由的本質就是一種對應關系，根據(jù)不同的URL請求，返回對應不同的資源。那么url地址和真實的資源之間就有一種對應的關系，就是路由。

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

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

2. hash模式

概述：

hash 路由模式是這樣的：http://xxx.abc.com/#/xx。有帶#號，后面就是 hash 值的變化。改變后面的 hash 值，它不會向服務器發(fā)出請求，因此也就不會刷新頁面。并且每次 hash 值發(fā)生改變的時候，會觸發(fā) hashchange 事件。因此我們可以通過監(jiān)聽該事件，來知道 hash 值發(fā)生了哪些變化。

window.addEventListener('hashchange', ()=>{
	// 通過 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>
      <!-- 通過標簽導航  聲明式導航 -->
      <a href="#/home" rel="external nofollow" >首頁</a>
      <!-- location.href='#/home' js方式進行導航切換 編程式導航 -->
    </li>
    <li>
      <a href="#/about" rel="external nofollow" >關于</a>
    </li>
  </ul>
  <div id="routerView"></div>
  <script>
    const routerRender = () => {
      // 每次都置空hash
      let html = ''
      // 根據(jù)地址欄hash值的不同返回對應的資源
      try {
        // 如果hash值為空就給一個home
        let hash = location.hash || '#/home'
        html = component[hash.slice(2)]()
      } catch (error) {
        html = `<div>404</div>`
      }
      // 渲染到頁面上
      document.getElementById('routerView').innerHTML = html
    }
    const component = {
      home() {
        return `<div>home頁面</div>`
      },
      about() {
        return '<div>關于頁面</div>'
      }
    }
    window.onload = function () {
      routerRender()
    }
    // 事件，監(jiān)聽地址欄中的hash值變化，實現(xiàn)回退
    window.addEventListener('hashchange', routerRender)
  </script>
</body>
</html>

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

優(yōu)缺點：

優(yōu)點：hash模式兼容性很強，刷新瀏覽器，頁面還會存在

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

3. history路由模式

概述：

HTML5的History API為瀏覽器的全局history對象增加了該擴展方法。它是一個瀏覽器（bom）的一個接口，在window對象中提供了onpopstate事件來監(jiān)聽歷史棧的改變，只要歷史棧有信息發(fā)生改變的話，就會觸發(fā)該事件。

history.pushState({},title,url); // 向歷史記錄中追加一條記錄
history.replaceState({},title,url); // 替換當前頁在歷史記錄中的信息。
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" >首頁</a>
    </li>
    <li>
      <a href="/about" rel="external nofollow" >關于</a>
    </li>
  </ul>
  <div id="routerView"></div>
  <script>
    const component = {
      home() {
        return `<div>home頁面</div>`
      },
      about() {
        return '<div>關于頁面</div>'
      }
    }
    const routerRender = pathname => {
      let html = ''
      try {
        html = component[pathname]()
      } catch (error) {
        html = `<div>404</div>`
      }
      document.getElementById('routerView').innerHTML = html
    }
    // history模式，它的路由導航，只能通過js來完成 , history它是js對象
    // 給鏈接添加點擊事件
    document.querySelectorAll('a').forEach(node => {
      node.addEventListener('click', function (evt) {
        // 阻止a標簽的默認跳轉行為
        evt.preventDefault()
        // 跳轉到指定的地址，能回退
        // history.pushState
        // 跳轉到指定持址，不能回退
        // history.replaceState
        history.pushState({}, null, this.href)
        // 渲染
        routerRender(this.href.match(/\/(\w+)$/)[1])
      })
    })
    // 在網頁加載完畢后立刻執(zhí)行的操作，即當 HTML 文檔加載完畢后，立刻渲染 home 中的標簽
    window.onload = () => {
      routerRender('home')
    }
    // 回退
    window.addEventListener('popstate', function () {
      routerRender(location.pathname.slice(1))
    })
  </script>
</body>
</html>