vue項目的mode:history模式

最近作的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');