Vue Router history模式的配置方法及其原理

Richard_Gao 發布于2019-08-30 11:04 / 1034人閱讀

摘要：但如果要使用模式，我們需要在后端進行額外配置。模式的配置方法我們來看看官方文檔是教我們怎么配置的模式。模式的配置實踐及原理強烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設置為，但不配置后端。

始發于我的博客 ryougifujino.com，歡迎訪問留言。

vue-router分為hash和history模式，前者為其默認模式，url的表現形式為http://yoursite.com#home，比較難看。后者的url表現形式為http://yoursite.com/home，比較美觀。
但如果要使用history模式，我們需要在后端進行額外配置。本文將討論如何配置以及為什么要這樣配置。

history模式的配置方法

我們來看看官方文檔是教我們怎么配置的：HTML5 History 模式。

首先要將mode設置為history：

const router = new VueRouter({
  mode: "history",
  routes: [...]
})

然后設置后端（這里采用的nginx）：

location / {
  try_files $uri $uri/ /index.html;
}

然后就......沒了！顯然官方的教程講的比較簡略，并且我們參照這個教程實際上還是會遇到一些問題。

history模式的配置實踐及原理

強烈建議：閱讀這部分之前，先看一下nginx的這部分文檔和這部分文檔。

既然官方文檔教我們這樣做了，我們就按照它說的來實踐一下。

只配置前端的情況

首先，我們將mode設置為history，但不配置后端。然后，假如我們的路由是長這個樣子的：

const routes = [
    {path: "/home", component: Home},
    {path: "/", redirect: "/home"}
];

我們用nginx部署項目，然后在地址欄輸入http://localhost:8080（這里配置的端口是8080），你會發現地址欄之后會變為http://localhost:8080/home，并且看起來一切正常，似乎路由也可以正常切換而不會發生其他問題（實際上會發生問題，后面會進行討論）。看起來好像不需要按官網告訴我們的那樣配置后端也能實現history模式，但如果你直接在地址欄輸入http://localhost:8080/home，你會發現你獲得了一個404頁面。

那么http://localhost:8080為什么可以（部分）正常顯示呢？道理其實很簡單，你訪問http://localhost:8080時，靜態服務器（這里是nginx）會默認去目標目錄（這里為location中root所指定的目錄）下尋找index.html（這是nginx在端口后沒有額外路徑時的默認行為），目標目錄下有這個文件嗎？有！然后靜態服務器返回給你這個文件，配合vue-router進行轉發，自然可以（部分）正常顯示。
但如果直接訪問http://localhost:8080/home，靜態服務器會去目標目錄下尋找home文件，目標目錄下有這個文件嗎？沒有！所以自然就404了。

配置后端

為了達到直接訪問http://localhost:8080/home也可以成功的目的，我們需要對后端（這里即nginx）進行一些配置。

首先想想，要怎樣才能達到這個目的呢？

在傳統的hash模式中（http://localhost:8080#home），即使不需要配置，靜態服務器始終會去尋找index.html并返回給我們，然后vue-router會獲取#后面的字符作為參數，對前端頁面進行變換。

類比一下，在history模式中，我們所想要的情況就是：輸入http://localhost:8080/home，但最終返回的也是index.html，然后vue-router會獲取home作為參數，對前端頁面進行變換。那么在nginx中，誰能做到這件事呢？答案就是try_files。

首先看一下try_files的語法：try_files file ... uri;
然后看一下官方文檔對它的介紹：

Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the file parameter according to the root and alias directives. It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made.

大意就是它會按照try_files后面的參數依次去匹配root中對應的文件或文件夾。如果匹配到的是一個文件，那么將返回這個文件；如果匹配到的是一個文件夾，那么將返回這個文件夾中index指令指定的文件。最后一個uri參數將作為前面沒有匹配到的fallback。（注意try_files指令至少需要兩個參數）

拿我自己的網站舉個例子：

location / { 
        root            /data/www/rf-blog-web; 
        index           index.html; 
        try_files       $uri $uri/ /index.html; 
}

$uri是nginx中的變量，比如我訪問的網址是http://localhost:8080/home，那么它就代表的/home。

在rf-blog-web這個目錄中，沒有子目錄，只有一個index.html和一些壓縮后的名稱是hash值的.js文件。當我們請求http://localhost:8080/home這個地址時，首先查找有無home這個文件，沒有；再查找有無home目錄，也沒有。所以最終會定位到第三個參數從而返回index.html，按照這個規則，所有路由里的url路徑最后都會定位到index.html。vue-router再獲取參數進行前端頁面的變換，至此，我們已經可以通過http://localhost:8080/home這個地址進行成功地訪問了。
而$uri這個參數的作用其實是匹配那些.js文件用的，而$uri/在這個例子中并沒有多大用，實際上是可以去掉的。

history模式下可能會遇到的問題及解決方案

在將我的項目（在路由中用了懶加載）改為history模式的過程中，有時候發現會出現chunk加載出錯的情況，打開chrome的network發現那個chunk加載404了，是因為請求的url中多了一層路徑。我在這里發現了解決方案。

LinusBorg說，因為在history模式中切換路由時，我們是真正改變了頁面的url路徑，所以webpack的runtime會認為它位于example.com/some/path。如果publicPath是設置的相對路徑，那么webpack加載chunk時可能會變成example.com/some/path/static/js/3.js這樣的路徑，然而chunk的真正路徑是example.com/static/js/3.js，所以我們需要將publicPath設置為絕對路徑（publicPath: "/"）來解決這個問題。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114756.html

vue-router實現原理

摘要：我們知道是的核心插件，而當前項目一般都是單頁面應用，也就是說是應用在單頁面應用中的。原理是傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的其實剛才單頁面應用跳轉原理即實現原理實現原理原理核心就是更新視圖但不重新請求頁面。近期面試，遇到關于vue-router實現原理的問題，在查閱了相關資料后，根據自己理解，來記錄下。我們知道vue-router是vue的核心插件，而當前vue項目...

vibiu 2019-08-23 16:09 評論0 收藏0
簡述vue-router實現原理

摘要：源碼解讀閱讀請關注下代碼注釋打個廣告哪位大佬教我下怎么排版啊，不會弄菜單二級導航撲通是什么首先，你會從源碼里面引入，然后再傳入參數實例化一個路由對象源碼基礎類源碼不選擇模式會默認使用模式非瀏覽器環境默認環境根據參數選擇三種模式的一種根據版 router源碼解讀閱讀請關注下代碼注釋打個廣告：哪位大佬教我下sf怎么排版啊，不會弄菜單二級導航（撲通.gif） showImg(https:...

Cristalven 2019-08-23 15:21 評論0 收藏0
簡述vue-router實現原理

摘要：源碼解讀閱讀請關注下代碼注釋打個廣告哪位大佬教我下怎么排版啊，不會弄菜單二級導航撲通是什么首先，你會從源碼里面引入，然后再傳入參數實例化一個路由對象源碼基礎類源碼不選擇模式會默認使用模式非瀏覽器環境默認環境根據參數選擇三種模式的一種根據版 router源碼解讀閱讀請關注下代碼注釋打個廣告：哪位大佬教我下sf怎么排版啊，不會弄菜單二級導航（撲通.gif） showImg(https:...

Ajian 2019-08-02 14:17 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0