Vue下路由History mode致使頁面沒法渲染的緣由

用 Vue.js + vue-router 建立單頁應用，是很是簡單的。使用 Vue.js ，咱們已經能夠經過組合組件來組成應用程序，當你要把 vue-router 添加進來，咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們。

通常開發的單頁應用的URL都會帶有#號的hash模式，由於整個應用自己而言就只有一個HTML，其餘的都是經過router來渲染。若是由於業務須要，或者單純是以爲帶#號不美觀，那麼可使用history模式，簡單而言就是在router的配置文件index.js中添加以下一行代碼：

history: mode

• 1

沒錯，這樣URL再也不會有#號，你會發現整個地址欄回到了你熟悉的那個樣子，不過，接下來介紹的就很是的重要了，可能不少剛入門的新人或多或少都會碰見這麼一兩個坑…

頁面沒法渲染

這裏以我寫的一個項目爲例子，當我開啓history模式的時候，我並無對路由進行任何處理，在Dev階段一切都是正常的，但是打包以後，訪問項目路徑：

sdp.driver.com/driver/

會發現頁面一片空白，可是靜態文件都可以正常的引用，由於使用了YII中的模塊，因此除了域名以外，還會帶有driver模塊名。通常不少人建立的項目都放在了根目錄下面，也就是：

sdp.driver.com

這樣的一種形式，沒問題。但是若是配置了模塊，或者放置在了子文件夾下面，那麼就會出問題。其實，這是由於router沒法找到路徑中的組件，因此也就沒法渲染了。只須要修改router中的index.js，在每一個path中加上你項目名稱就好了，這樣就可以成功了。

最後的頁面效果：

404錯誤

在History mode下，若是直接經過地址欄訪問路徑，那麼會出現404錯誤，這是由於這是單頁應用（廢話）…實際上是由於調用了history.pushState API 因此全部的跳轉之類的操做都是經過router來實現的，解決這個問題很簡單，只須要在後臺配置若是URL匹配不到任何靜態資源，就跳轉到默認的index.html。具體配置以下：

Apache

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

nginx

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

• 1
• 2
• 3

Node.js (Express)

關於每次點擊連接都要刷新頁面的問題

衆所周知，開發單頁應用就是由於那絲般順滑的體驗效果，若是每次點擊都會刷新頁面…
出現這個的緣由是由於使用了window.location來跳轉，只須要使用使用router提供的方法，就可以解決這個問題：

在main.js中配置中將router綁定到全局

Vue.prototype.router = router;

• 1

以後都使用以下的方式來控制跳轉

this.router.push('driver/service');

• 1

好啦，此次關於Vue路由的「坑」就介紹到這裏了，之後會發表更多的優質文章，若是對你有所幫助，請點擊贊，謝謝