最近做項目才發現，我確實對 vue-router 太不熟悉了，都只了解個簡單用法就開始搞了，本來很簡單的問題，都搞不清楚。現在重新看一遍文檔，重新梳理一下。 ### vue 路由的原理 --- 說實話，路由我一直也就光顧著用，沒認真思考過這個問題，還是那次人家面試問了這個，我才反應過來是應該好好的了解一下了。 無刷新跳轉頁面，是單頁應用的一大優勢，用戶體驗好，加載速度快，vue 路由的跳轉就是無刷新的，它有兩種形式，可以在定義路由的時候通過 `mode` 字段去配置，如果不配置這個字段，那么默認使用的就是 `hash` 模式。 hash 模式，即通過在鏈接后添加 # + 路由名字，根據匹配這個字段的變化，觸發 `hashchange` 事件，動態的渲染出頁面。就有點類似像 a 鏈接用作頁面上的錨點一樣，不會刷新頁面。 另外一種方式，是 `history` 模式，也就是使用的瀏覽器的 history API，`pushState` 和 `replaceState`。通過調用 `pushState` 操作瀏覽器的 `history` 對象，改變當前地址，同時結合`window.onpopstate` 監聽瀏覽器的返回和前進事件，同樣可以實現無刷新的跳轉頁面。`replaceState` 與 `pushStete` 不同的就是，前者是替換一條記錄，后者是添加一條記錄。 有關于 `pushState` 的用法，詳見[MDN文檔](https://developer.mozilla.org/zh-CN/docs/Web/API/History_API) 。這個 API 與 `ajax` 合起來構成的 `pjax` 技術，也是用于實現頁面無刷新加載的一種方式，常用于 PC 長列表頁面的翻頁啥的~ history 相對于 hash 模式來說，最大的好處就是沒有討厭的 # 符號，比如同樣一個 list 頁面，在 `hash` 模式下，url 鏈接表現為 `http://yoursite.com/#/list`，看著就難受。在 history 模式下面，url 鏈接表現為 `http://yoursite.com/list` ，看著比較清爽～而且～相信做過微信公眾號開發的都懂，這個該死的 # 有多煩人～在下面的應用場景里面我再講下這個問題～ 那么問題來了，既然 history 模式樣子好看，功能也一樣，為啥還是用 hash 模式的人比較多【此處沒有真憑實據，我瞎說的】？因為 history 模式，還需要服務端進行配置，否則刷新頁面就會產生 404 錯誤。這里也比較好理解啦，因為我們實際上是使用的 pushState 操作頁面的跳轉，而不是真的去服務器請求另外一個 list.html 文件，那按照 `http://yoursite.com/#/list` 這個路徑，自然找不到啦～ 如果是 nginx 的服務器，在 `location` / 里面加上 `try_files $uri $uri/ /index.html;` 即可。這行代碼表示：如果匹配不到靜態資源的路徑，就將重定向到 index 頁面，這樣就不會出錯啦～因為需要找后端小哥哥修改服務器配置文件，如果自己沒有完全理解，兩邊又溝通不清楚的情況下，使用 history 模式的難度無疑就大了一些～不過也不是什么大問題～全看個人需要啦哈哈～ ### vue 路由傳參的兩種方式 --- 頁面參數無非就兩種，query 和 params，params 是以 `/params` 的形式表現在 url 上，而 query 是以 `?query=query1` 這種形式表現在 url 上，此外，使用 params 參數還需要配置到路由定義上，不然不會展示在 url 上，并且刷新就會消失。 這個比較簡單，需要注意的地方就是：如果傳 params 參數，不能使用 path 字段跳轉，否則沒效果。而 query 參數則沒有這個限制，使用 `name` 和 `path` 字段都可以。 這個雖然簡單！但是一定要自己操作一遍才記得住啊。。反正我是早就看到，但是一直記混了～～重新用 demo 寫了一遍才記住～而且別人說的也不一定就是對的，還是要自己實驗一遍才知道呢。╮(╯▽╰)╭ ### vue 路由的跳轉 --- vue 路由的跳轉分成兩種，一種是聲明式，使用`<router-link>`聲明跳轉，`to`屬性定義跳轉的參數。另一種是編程式，使用 `router.go()`、`router.push()`、`router.replace()`方法進行跳轉，`go`方法就是與瀏覽器的`history` api 的方法相同，可以進行返回上一頁等操作。 `push`方法和`replace`方法的區別在于，前者會把當前頁面加入 history 記錄里面，可以通過`history.go(-1)`回到這個頁面。而`replace`方法則會在 history 記錄里面替換掉當前記錄，如果你在跳轉后的新頁面返回上一頁，它不會回到跳轉前的頁面，會回到上上個頁面，如果上上個頁面沒有記錄，則不會跳轉。 ### vue 路由守衛 --- vue 路由守衛分為三種，一種是全局的路由守衛，通常在實例化路由之后設置，來做一些通用的路由操作，它所有的路由跳轉都會執行的操作；一種是單個路由獨享的守衛，在單個路由定義的時候進行設置，所有跳轉這個路由都會執行；另外一種就是組件內的守衛，只在組件內生效。 全局路由守衛類型： - `router.beforeEach(to, from, next)` - `router.afterEach(to, from, next)` 路由獨享的守衛： - `beforeEnter(to, from, next)` 組件獨享的守衛: - `beforeRouteEnter(to, from, next)` - `beforeRouteUpdate(to, from, next)` —— 動態參數路徑改變時，組件實例被復用的時候調用。 - `beforeRouteLeave(to, from, next)` —— 導航離開組件所在路由時被調用。 ### vue 路由的一些應用場景處理 --- #### 什么時候用 push，什么時候用 replace 最開始路由跳轉我都是用 `push()` 比較多，或者用 `go()` 做返回，很少用到過 `replace()` ，后來在業務需求下翻文檔才發現這個漏掉的 API。簡單來說，當你需要從A頁面跳轉到B頁面，再跳轉到C頁面，然后在C頁面返回，能直接返回到A頁面。那么在B頁面跳轉C頁面的時候，使用`replace()`方法進行跳轉即可。 ### 動態改變頁面的 title - 定義路由的時候，在路由的 meta 字段里面添加一個 title 屬性，定義好頁面的標題名稱。 - 在全局的路由守衛`beforeEach()`方法里面添加一個判斷，獲取路由的 meta 字段，動態的改變頁面的 title。 ``` // router.js { path: '/index', name: 'index', meta: { title: '首頁' } } // main.js router.beforeEach(to, from, next){ if(to.meta.title){ document.title = to.meta.title } next() // 這個方法必須調用 不然路由不會跳轉 } ``` ### 微信開發，單頁應用頁面 url 導致的傳參或者跳轉失敗的問題 #### 微信授權跳轉 在做微信授權跳轉的時候，hash 模式下鏈接里面帶有 # 號可能會導致重定向跳轉失敗，使用 encodeURIComponent 把頁面地址處理之后，再傳入。 ``` let _url = encodeURIComponent(location.href) location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${_url}&response_type=code&scope=snsapi_base&state=#wechat_redirect` ``` #### 獲取 wxconfig 配置 前端獲取 wxconfig 比較簡單，主要的操作都在后端，前端只需要傳一個 url 參數，由后端去獲取 config 的參數，回傳給前端。前端拿到參數后，調用 `wx.config` 方法。 ``` let url = location.href.split('#')[0] http.get('weixin/config',{ params:{ url: encodeURIComponent(url) } }) .then(res=>{ wx.config({ beta: true, // 必須這么寫，否則wx.invoke調用形式的jsapi會有問題 debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: res.data.appId, // 必填，企業微信的corpID timestamp: res.data.timestamp, // 必填，生成簽名的時間戳 nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串 signature: res.data.signature,// 必填，簽名，見 附錄-JS-SDK使用權限簽名算法 jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，凡是要調用的接口都需要傳進來 }) // 檢測微信 wx.error(function(res){ // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。 console.log('錯誤信息====',res) }) }) ``` ### 單頁面應用加百度統計 在單頁應用上面，如果直接把百度統計的代碼加到 html 不做任何處理的話，是統計不到每個頁面的訪問量的，所以把添加 js 和 監聽跳轉頁面的代碼都寫到 main.js 里面去。 ``` // 添加百度統計 先判斷是生產環境還是開發環境 如果是開發環境 不用添加 if (process.env.NODE_ENV !== 'development') { let _hmt = _hmt || []; window._hmt = _hmt; // 必須把_hmt掛載到window下，否則找不到 (function() { var hm = document.createElement("script"); hm.src = "https://#/hm.js?yourappid"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })() } router.beforeEach(to, from, next){ // 添加百度統計代碼 先判斷是生產環境還是開發環境 if (process.env.NODE_ENV !== 'development') { // 添加頁面統計 if (_hmt) { if (to.path) { _hmt.push(['_trackPageview', '/#' + to.fullPath]); } } } } ```