問題一：
// 動態路由
/detail/:id
問題：
動態路由跳轉的時候，頁面是不刷新的，相信很多人都遇到了相同的問題
解決方法:
在全局的router-view組件上設置一個key值，此key值為一個時間戳或者隨機字符，對於keep-alive的組件不做這個處理。
問題二：
router.go(0)
問題：
這種寫法本質上是想達到刷新當前頁面的目的，但是在一些瀏覽器上不兼容，主要是ios，webview上也會出現問題，動作並不會觸發
解決方法：
使用window.location.reload()來代替，如果項目中使用了vuex的話，這種做法會導致狀態清空，需要自己把握，還有另外一種處理方式，就是在列表頁刪除某一個項操作，操作完成需要重載，這時就可以使用異步請求來達到效果。更多的情況下，我們是想重置一些表單元素的值，或者大量的數據重置，這種情況可以試試
```
Object.assign(this.$data, this.$options.data())
```
問題三
hash模式在微信場景下的一個問題，當我們發起一個微信授權鏈接時，微信會返回一個code字段，和一些其他的參數，這些參數以query的形式連接，並且code的有效期很短，單頁幾乎每次都要重新授權。那么第二次授權的時候這些參數並不會從鏈接里消失，會一直帶着，影響了第二次授權。
解決方法：
授權之前檢測鏈接里是否有code參數，有的話就不能使用location.href作為微信的redirect_url參數，看代碼
```
let oldCode = this.getQueryString('code') ;
let temp = '' ;
if( oldCode ){
temp = window.location.origin + window.location.hash ;
}else{
temp = window.location.href ;
}
```
這樣還不能徹底避免鏈接中帶有老的code參數的問題
我們還需要進一步處理，通常的業務是支付或者登陸完成是要進行跳轉的，這個時候就不要使用vue-router的router.push||router.replace等等的跳轉了，我們需要把鏈接中的其他多余參數干掉，避免影響，通常使用href跳轉，具體要跳轉到哪就看業務需求了。
問題四
頁面授權問題，通常我們的實際業務流程中，有很多頁面是需要登錄授權之后才能進入的。
解決方法
這時我們需要對路由進行一些處理，例如這樣定義一個路由
```
{
path : '/demand' ,
component : demand ,
meta : { requiresAuth : true }
}
```
我們在進入路由之前進行驗證
```
router.beforeEach((to , from , next) => {
// 判斷是否帶有特殊標記
if( to.matched.some( record => record.meta.requiresAuth ) ){
let login = getSession( 'login' ) ;// 驗證是否登錄
if( !login ){
next({
path : '/login', // 登錄頁
query : { redirect : to.fullPath }
})
}else{ next() }
}else{ next() }
// 需要注意的是這里的next()方法一定要調用，不然會阻塞路由，導致頁面不會正常跳轉
})
```
問題五
微信分享出來的鏈接帶有一些其他的參數，比如從app分享出來的會有一個from=singlemessage的參數，是加在域名后面的，還有朋友圈from=timeline等等。
```
http://www.watergourd.com/?from=singlemessage#/index
```
這樣的形式會影響我們正常的路由系統，導致一系列的問題
解決方法：
```
router.beforeEach((to , from , next) => {})
```
還是在這個鈎子里處理，通過
```
let reg = /singlemessage|timeline/g
```
這樣的正則來判斷是否包含這些參數，包含的話就干掉，從新跳轉，我最早的處理方式是在index.html的頭部來處理，后面發現有時成功，有時失敗，才考慮到在進入路由系統之前來處理這些。
問題六
分享出來的頁面點進去為首頁，這個問題非常棘手，由於涉及到第三方，調試起來也麻煩，一般的本地開發環境是沒辦法測試的。
解決方法：
首先應該保持路由參數的清潔，然后把頁面的路由都定義在空path之前，也就是說所有的異常路由都放到最后，特別是空path的這種情況，有些人的處理是把'/'定義在最前面，然后用重定向的方式導到首頁，后面我發現這種處理容易出問題
```
const routes = [
{
path : '/checkstandSuccess',
component : checkstandSuccess
},
// 異常路由處理------------------
{
path : '/' ,
redirect : '/home'
},
// 404頁面
{
path: '*',
component: NotFoundPage
}
]
```
問題七
keep-alive導致的問題，通常我們需要緩存一些靜態頁面，但是有時候我們也需要通過一些狀態或者參數來刷新頁面，這時我們就需要更新緩存
解決方法:
定義：在路由信息中配置keep-alive為true時，將會緩存當前頁面，第一次進入一個緩存的頁面時，vue的生命周期執行的順序為created() -> mounted() -> activated(),這里的activated()鈎子只存在於keep-alive為true的路由頁面，之后每次進入這個緩存頁面的時候，都不會再去執行vue的生命周期，而是從緩存里面拿，只有activated()鈎子在每次進入這個緩存頁面是才會執行，當然還有一個鈎子deactivated()是在離開頁面的時候會執行.
這里就存在一個坑，當我們需要通過子組件或者其他的頁面傳遞的 參數，來更新這個緩存頁面的DOM時，發現按正常邏輯處理數據獲取的部分一直不會調用，這時就要在activated()里面也放一分請求數據的邏輯,來更新dom.這只是其中的一種解決辦法。
第二種辦法是，通過beforeRouteEnter()和beforeRouteLeave()這兩個鈎子來解決，注意這兩個鈎子是在vue2.2之后才能使用。例如在搜索頁輸入關鍵字，跳轉到列表頁進行數據獲取，而列表頁是keep-alive為true的，那么此時我們只需要在搜索頁的生命周期中配置
beforeRouteLeave(to,from,next){
to.meta.keepAlive = false;
next();
}
就ok了，to表示即將要進入的頁面的路由對象，通過更改keepAlive屬性，以達到更新列表頁的目的。還有一種情況，就是從列表頁到詳情頁的時候，往往都需要緩存列表的篩選條件或者結果，那么在列表頁的beforeRouteLeave()中配置from.meta.keepAlive=true,就可以了，那么再次從詳情頁返回列表的時候，列表篩選結果的狀態還存在 這種體驗，就相當到位了。
---------------------
作者：water-gourd
來源：CSDN
原文：https://blog.csdn.net/zhang_fox/article/details/80178986
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！