vue-router 默認是hash模式，使用url的hash來模擬一個完整的url，當url改變的時候，頁面不會重新加載。但是如果我們不想hash這種以#號結尾的路徑時候的話，我們可以使用路由的history的模式。比如如下網址：

使用hash模式的話，那么訪問變成 http://localhost:8080/bank/page/count/#/ 這樣的訪問，如果路由使用 history的話，那么訪問的路徑變成 如下：

http://localhost:8080/bank/page/count 這樣的了；

在路由的配置就是如下：我們還是以 vue-cli項目為例：

在src/router/index.js 代碼如下：

import Vue from 'vue';import Router from 'vue-router';// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({ mode: 'history', // 訪問路徑不帶井號 需要使用 history模式 base: '/bank/page', // 基礎路徑 routes: [  {   path: '/count',   name: 'count',   component: resolve => require(['@/views/count'], resolve) // 使用懶加載  } ]});

不過history的這種模式需要后臺配置支持。比如：

當我們進行項目的主頁的時候，一切正常，可以訪問，但是當我們刷新頁面或者直接訪問路徑的時候就會返回404，那是因為在history模式下，只是動態的通過js操作window.history來改變瀏覽器地址欄里的路徑，并沒有發起http請求，但是當我直接在瀏覽器里輸入這個地址的時候，就一定要對服務器發起http請求，但是這個目標在服務器上又不存在，所以會返回404，怎么解決呢？我們現在可以把所有請求都轉發到 http://localhost:8080/bank/page/index.html上就可以了。

一： apache服務器上的配置如下：

1. 如果我們現在是使用apache做web服務器的話，我們需要開啟 .htaccess支持即可：

在文件里加上如下，就一切正常了

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

上面的apache的作用是：把所有服務器上不存在的請求全部轉發到 index.html上去，這樣就可以直接通過各種url來訪問了。

注意：

1. RewriteRule . /bank/page/index.html [L] 這段代碼；前面需要加 /bank/page/這樣的，因為我在路由配置base里面

加了 /bank/page/ 這個路徑，否則匹配不到了。

2. vue-cli 項目中需要修改 config/index.js 中的build下的 assetsPublicPath: '/bank/page/', 如果使用相對路徑，

chunk文件會報錯找不到。

3. 在apache的 www/bank/page 目錄下新建 .htaccess文件，需要修改RewriteRule 為/bank/page/index.html, 否則刷新頁面服務端會直接報404錯誤。

4. 修改httpd.conf文件，開啟rewrite_module功能。

5. LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#

6. 然后找到AllowOverride None的那行，把它改成AllowOverride All，來使.htaccess文件生效。

二：nginx服務器上的配置如下：

vue-cli 執行打包命令：