最近做的Vue + Vue-Router + Webpack +minitUI項目碰到的問題，在此記錄一下，Vue-router 中有hash模式和history模式，vue的路由默認是hash模式，一般開發的單頁應用的URL都會帶有#號的hash模式，因為整個應用本身而言就只有一個HTML，其他的都是通過router來渲染。簡單介紹下兩種模式：
- hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算）。比如這個 URL：http://www.abc.com/#/hello，hash 的值為 #/hello。它的特點在於：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。
- history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。
- 因此可以說，hash 模式和 history 模式都屬於瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（通過調用瀏覽器提供的接口）來實現前端路由.
使用場景
一般場景下，hash 和 history 都可以，除非你更在意顏值，# 符號夾雜在 URL 里看起來確實有些不太美麗。
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成URL 跳轉而無須重新加載頁面。
我最初用的是hash模式，但是hash模式下url需要帶“#”符號，不僅看起來不舒服，而且有些場景下是會破壞路由中的"#"（微信分享頁面就會把"#"后邊的內容處理掉，需要將帶參的url作為一個參數傳給后台，后台取不到#后面的東西）在后面需要開發微信支付、分享,授權登錄等就暴露出了問題，所以就需要使用history模式。只需在router文件夾下的index.js中加入
mode: 'history',
但history模式打包后出現頁面一片空白的情況,而且沒有資源加載錯誤的報錯信息.
1.首先你需要確認頁面空白不是由資源文件路徑不正確引起的，如果資源找不到就將絕對路徑改為相對路徑，我博客中頁有記錄。
2.在資源文件能正常加載的情況下還是空白頁面，查看資源加載的路徑，我資源加載路徑是http://xxx.com/dist，我的是將打包生成的dist文件夾直接放到了public下，沒有將dist文件里面的static文件夾和index.html放到public下，所以出現http://xxx.com/dist，后面還有dist,估計是這個原因。
如果項目直接放的跟目錄, 那么是沒有問題的,如果是子目錄,那么就會一片空白了.這個vue官方有解釋,需要加一個base
|
1
2
|
// base: '/history',
// mode: 'history',
|
這個base即為項目路徑.我的是在在router文件夾下的index.js加入
base: '/dist'
這是因為router無法找到路徑中的組件，所以也就無法渲染了。然后再修改router中的index.js，給每一個component加上name。
3.然后就是后端的配合，在文檔中有說明，照着改就好了，https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
接着說一下微信支付，也是因為凡是涉及充值的頁面，不能做成帶hash路由的的頁面！，於是也要用history模式
/*************此處是改成history模式后，但是不能刷新，一刷新，然后就找不到頁面，公司要求是要有當前頁面的刷新功能，還要有直接通過鏈接跳轉到指定頁面的功能，顯然history模式是不符合要求的，所以還得用hash模式，改回hash模式后，支付頁面竟然可以支付了，應該是微信公眾號配置的路徑域名后加上了dist,vue項目router文件夾下的index.js加入base: '/dist'的緣故***********/
然后微信公眾號支付，前台向服務器端發起ajax請求，服務器端組裝支付參數，然后返回給前台，前端發起支付報錯，
-1支付缺少參數：appId。
發現WeixinJSBridge.invoke()方法要求傳入的是一個對象，並且參數要分開寫，不能一個對象傳進去，如下
最后微信后台的配置可以看http://www.cnblogs.com/saysmy/p/6780485.html
關於每次點擊鏈接都要刷新頁面的問題
眾所周知，開發單頁應用就是因為那絲般順滑的體驗效果，如果每次點擊都會刷新頁面…
出現這個的原因是因為使用了window.location來跳轉，只需要使用使用router提供的方法，就能夠解決這個問題：
在main.js中配置中將router綁定到全局
Vue.prototype.router = router;
之后都使用如下的方式來控制跳轉
this.router.push('driver/service');