為什么要有 hash 和 history

對(duì)于 Vue 這類漸進(jìn)式前端開(kāi)發(fā)框架，為了構(gòu)建 SPA（單頁(yè)面應(yīng)用），需要引入前端路由系統(tǒng)，這也就是 Vue-Router 存在的意義。前端路由的核心，就在于 —— 改變視圖的同時(shí)不會(huì)向后端發(fā)出請(qǐng)求。

為了達(dá)到這一目的，瀏覽器當(dāng)前提供了以下兩種支持：

1.hash —— 即地址欄 URL 中的 # 符號(hào)（此 hash 不是密碼學(xué)里的散列運(yùn)算）。

比如這個(gè) URL：http://www.abc.com/#/hello，hash 的值為 #/hello。它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，“#”后面的內(nèi)容不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)后端完全沒(méi)有影響，因此改變 hash 不會(huì)重新加載頁(yè)面。

2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）
這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。

因此可以說(shuō)，hash 模式和 history 模式都屬于瀏覽器自身的特性，Vue-Router 只是利用了這兩個(gè)特性（通過(guò)調(diào)用瀏覽器提供的接口）來(lái)實(shí)現(xiàn)前端路由。

vue-router 的 history 模式是個(gè)提高顏值的好東西，沒(méi)有了 hash 的路由看起來(lái)清爽許多。

開(kāi)發(fā)的時(shí)候，如果我們使用 devServer 來(lái)啟動(dòng)服務(wù)，由于一般不共用端口，我們一般不存在非根目錄的問(wèn)題。

而刷新后 404 的問(wèn)題可以借助 historyApiFallback 來(lái)解決。

但當(dāng)我們項(xiàng)目對(duì)外開(kāi)放時(shí)，往往無(wú)法在域名根目錄下提供服務(wù)，這個(gè)時(shí)候資源的訪問(wèn)路徑與開(kāi)發(fā)時(shí)的根目錄就有了區(qū)別。

首先，我們通過(guò) webpack 來(lái)配置一下項(xiàng)目中所有資源的基礎(chǔ)路徑，讓這份代碼在開(kāi)發(fā)和生產(chǎn)環(huán)境中都可以正確找到資源。

// config/index.js
module.exports = {
  dev: {
    ...
    // 開(kāi)發(fā)環(huán)境根目錄 - 服務(wù)根目錄 - 絕對(duì)路徑
    assetsPublicPath: '/'
    ...
  }，
  build: {
    ...
    // 生產(chǎn)環(huán)境根目錄 - 服務(wù)器訪問(wèn)路徑 - 絕對(duì)路徑
    assetsPublicPath: '/test/project1/'
    ...
  }
}

 
// build/webpack.common.conf.js
const config = require('../config')
module.exports = {
  output: {
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }
}

// build/webpack.dev.conf.js
const common = require('./webpack.common')
module.exports = merge(common, {
  devServer: {
    historyApiFallback: true
  }
}

然后在提供服務(wù)的服務(wù)器配置中做如下配置（以 nginx 為例）：

location /test/project1 {
    alias .../project1; // 項(xiàng)目的真實(shí)路徑
    index index.html;
    try_files $uri $uri/ /test/project1/index.html;
}

try_files 會(huì)按順序檢查參數(shù)中的資源是否存在，并返回第一個(gè)找到的資源，如果都沒(méi)有找到，它會(huì)讓 nginx 內(nèi)部重定向到會(huì)后一個(gè)參數(shù)。

對(duì)了，所以它的的作用是解決刷新 404 的問(wèn)題。

這里值得注意的是 try_files 的參數(shù)是絕對(duì)路徑。

至此，你開(kāi)啟 history 模式的項(xiàng)目就可以順利的跑在任何路徑了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論