最近做項目才發(fā)現(xiàn)，我確實對 vue-router 太不熟悉了，都只了解個簡單用法就開始搞了，本來很簡單的問題，都搞不清楚。現(xiàn)在重新看一遍文檔，重新梳理一下。

vue 路由的原理

說實話，路由我一直也就光顧著用，沒認真思考過這個問題，還是那次人家面試問了這個，我才反應過來是應該好好的了解一下了。

無刷新跳轉(zhuǎn)頁面，是單頁應用的一大優(yōu)勢，用戶體驗好，加載速度快，vue 路由的跳轉(zhuǎn)就是無刷新的，它有兩種形式，可以在定義路由的時候通過 mode 字段去配置，如果不配置這個字段，那么默認使用的就是 hash 模式。
hash 模式，即通過在鏈接后添加 # + 路由名字，根據(jù)匹配這個字段的變化，觸發(fā) hashchange 事件，動態(tài)的渲染出頁面。就有點類似像 a 鏈接用作頁面上的錨點一樣，不會刷新頁面。

另外一種方式，是 history 模式，也就是使用的瀏覽器的 history API，pushState 和 replaceState。通過調(diào)用 pushState 操作瀏覽器的 history 對象，改變當前地址，同時結(jié)合window.onpopstate 監(jiān)聽瀏覽器的返回和前進事件，同樣可以實現(xiàn)無刷新的跳轉(zhuǎn)頁面。replaceState 與 pushStete 不同的就是，前者是替換一條記錄，后者是添加一條記錄。

有關于 pushState 的用法，詳見MDN 文檔。這個 API 與 ajax 合起來構(gòu)成的 pjax 技術，也是用于實現(xiàn)頁面無刷新加載的一種方式，常用于 PC 長列表頁面的翻頁啥的~
history 相對于 hash 模式來說，最大的好處就是沒有討厭的 # 符號，比如同樣一個 list 頁面，在 hash 模式下，url 鏈接表現(xiàn)為 http://yoursite.com/#/list，看著就難受。在 history 模式下面，url 鏈接表現(xiàn)為 http://yoursite.com/list ，看著比較清爽～而且～相信做過微信公眾號開發(fā)的都懂，這個該死的 # 有多煩人～在下面的應用場景里面我再講下這個問題～

那么問題來了，既然 history 模式樣子好看，功能也一樣，為啥還是用 hash 模式的人比較多【此處沒有真憑實據(jù)，我瞎說的】？因為 history 模式，還需要服務端進行配置，否則刷新頁面就會產(chǎn)生 404 錯誤。這里也比較好理解啦，因為我們實際上是使用的 pushState 操作頁面的跳轉(zhuǎn)，而不是真的去服務器請求另外一個 list.html 文件，那按照 http://yoursite.com/#/list 這個路徑，自然找不到啦～

如果是 nginx 的服務器，在 location / 里面加上 try_files $uri $uri/ /index.html; 即可。這行代碼表示：如果匹配不到靜態(tài)資源的路徑，就將重定向到 index 頁面，這樣就不會出錯啦～因為需要找后端小哥哥修改服務器配置文件，如果自己沒有完全理解，兩邊又溝通不清楚的情況下，使用 history 模式的難度無疑就大了一些～不過也不是什么大問題～全看個人需要啦哈哈～

vue 路由傳參的兩種方式

頁面參數(shù)無非就兩種，query 和 params，params 是以 /params 的形式表現(xiàn)在 url 上，而 query 是以 ?query=query1 這種形式表現(xiàn)在 url 上，此外，使用 params 參數(shù)還需要配置到路由定義上，不然不會展示在 url 上，并且刷新就會消失。

這個比較簡單，需要注意的地方就是：如果傳 params 參數(shù)，不能使用 path 字段跳轉(zhuǎn)，否則沒效果。而 query 參數(shù)則沒有這個限制，使用 name 和 path 字段都可以。
這個雖然簡單！但是一定要自己操作一遍才記得住啊。。反正我是早就看到，但是一直記混了～～重新用 demo 寫了一遍才記住～而且別人說的也不一定就是對的，還是要自己實驗一遍才知道呢。╮(╯▽╰)╭

vue 路由的跳轉(zhuǎn)

vue 路由的跳轉(zhuǎn)分成兩種，一種是聲明式，使用<router-link>聲明跳轉(zhuǎn)，to屬性定義跳轉(zhuǎn)的參數(shù)。另一種是編程式，使用 router.go()、router.push()、router.replace()方法進行跳轉(zhuǎn)，go方法就是與瀏覽器的history api 的方法相同，可以進行返回上一頁等操作。

push方法和replace方法的區(qū)別在于，前者會把當前頁面加入 history 記錄里面，可以通過history.go(-1)回到這個頁面。而replace方法則會在 history 記錄里面替換掉當前記錄，如果你在跳轉(zhuǎn)后的新頁面返回上一頁，它不會回到跳轉(zhuǎn)前的頁面，會回到上上個頁面，如果上上個頁面沒有記錄，則不會跳轉(zhuǎn)。

vue 路由守衛(wèi)

vue 路由守衛(wèi)分為三種，一種是全局的路由守衛(wèi)，通常在實例化路由之后設置，來做一些通用的路由操作，它所有的路由跳轉(zhuǎn)都會執(zhí)行的操作；一種是單個路由獨享的守衛(wèi)，在單個路由定義的時候進行設置，所有跳轉(zhuǎn)這個路由都會執(zhí)行；另外一種就是組件內(nèi)的守衛(wèi)，只在組件內(nèi)生效。

全局路由守衛(wèi)類型：

• router.beforeEach(to, from, next)
• router.afterEach(to, from, next)

路由獨享的守衛(wèi)：

• beforeEnter(to, from, next)

組件獨享的守衛(wèi):

• beforeRouteEnter(to, from, next)
• beforeRouteUpdate(to, from, next) —— 動態(tài)參數(shù)路徑改變時，組件實例被復用的時候調(diào)用。
• beforeRouteLeave(to, from, next) —— 導航離開組件所在路由時被調(diào)用。

vue 路由的一些應用場景處理

什么時候用 push，什么時候用 replace

最開始路由跳轉(zhuǎn)我都是用 push() 比較多，或者用 go() 做返回，很少用到過 replace() ，后來在業(yè)務需求下翻文檔才發(fā)現(xiàn)這個漏掉的 API。簡單來說，當你需要從A頁面跳轉(zhuǎn)到B頁面，再跳轉(zhuǎn)到C頁面，然后在C頁面返回，能直接返回到A頁面。那么在B頁面跳轉(zhuǎn)C頁面的時候，使用replace()方法進行跳轉(zhuǎn)即可。

動態(tài)改變頁面的 title

• 定義路由的時候，在路由的 meta 字段里面添加一個 title 屬性，定義好頁面的標題名稱。
• 在全局的路由守衛(wèi)beforeEach()方法里面添加一個判斷，獲取路由的 meta 字段，動態(tài)的改變頁面的 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() // 這個方法必須調(diào)用 不然路由不會跳轉(zhuǎn) }

微信開發(fā)，單頁應用頁面 url 導致的傳參或者跳轉(zhuǎn)失敗的問題

微信授權跳轉(zhuǎn)

在做微信授權跳轉(zhuǎn)的時候，hash 模式下鏈接里面帶有 # 號可能會導致重定向跳轉(zhuǎn)失敗，使用 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 參數(shù)，由后端去獲取 config 的參數(shù)，回傳給前端。前端拿到參數(shù)后，調(diào)用 wx.config 方法。

let url = location.href.split('#')[0] http.get('weixin/config',{params:{url: encodeURIComponent(url)} }) .then(res=>{wx.config({beta: true, // 必須這么寫，否則wx.invoke調(diào)用形式的jsapi會有問題debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。appId: res.data.appId, // 必填，企業(yè)微信的corpIDtimestamp: res.data.timestamp, // 必填，生成簽名的時間戳nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串signature: res.data.signature,// 必填，簽名，見 附錄-JS-SDK使用權限簽名算法jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進來})// 檢測微信wx.error(function(res){// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。console.log('錯誤信息====',res)}) })

單頁面應用加百度統(tǒng)計

在單頁應用上面，如果直接把百度統(tǒng)計的代碼加到 html 不做任何處理的話，是統(tǒng)計不到每個頁面的訪問量的，所以把添加 js 和 監(jiān)聽跳轉(zhuǎn)頁面的代碼都寫到 main.js 里面去。

// 添加百度統(tǒng)計 先判斷是生產(chǎn)環(huán)境還是開發(fā)環(huán)境 如果是開發(fā)環(huán)境 不用添加 if (process.env.NODE_ENV !== 'development') {let _hmt = _hmt || [];window._hmt = _hmt; // 必須把_hmt掛載到window下，否則找不到(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?yourappid";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})() }router.beforeEach(to, from, next){// 添加百度統(tǒng)計代碼 先判斷是生產(chǎn)環(huán)境還是開發(fā)環(huán)境if (process.env.NODE_ENV !== 'development') {// 添加頁面統(tǒng)計if (_hmt) {if (to.path) {_hmt.push(['_trackPageview', '/#' + to.fullPath]);}}} }

參考文檔：
https://segmentfault.com/a/1190000011967786
https://www.jianshu.com/p/febd38110645

轉(zhuǎn)載于:https://www.cnblogs.com/linxue/p/10293893.html

總結(jié)

以上是生活随笔為你收集整理的vue 路由知识点梳理及应用场景整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。