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

vue 路由的原理

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

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

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

有關于 pushState 的用法，詳見MDN 文檔。這個 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, // 必填，企業微信的corpIDtimestamp: 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.baidu.com/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]);}}} }

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

轉載于:https://www.cnblogs.com/linxue/p/10293893.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。