vue-router重定向 不刷新問題

　　前陣子太忙了，自己一個人一邊開發着新項目，一邊維護着舊項目，沒時間寫博客，終於讓我騰出時間了。廢話少說，開始正文。

　問題描述:

　　之前項目是angular開發的，后來用vue重構后。項目路徑和vue路徑不一致，但是app端分享出的鏈接，依舊是舊項目鏈接。

　解決方法：

 

　　通過閱讀vue-router的官方文檔，發現重定向可以解決這個問題。

　　如之前文件路徑是'/live/detail/id=7234'，'/skill/microList/',新項目路徑是'/s/live/detail?id=7234','/s/live/list'

{path: '/live/list(/)?:foo', redirect: '/s/live/list'},
{path: '/s/live/list', meta: {keepAlive:true,title: '課程'}, component: resolve => require(['../pages/s/live/list/Index.vue'], resolve)},
{path: '/live/detail(/)?:id', redirect: '/s/live/detail?:id'},
{path: '/s/live/detail', meta: {title: '課程詳情'}, component: resolve => require(['../pages/s/live/detail/Index.vue'], resolve)},

　新的問題：　　

 　　本來以為重定向就萬事大吉了，結果發版后，有用戶反饋是空白頁面。我仔細看了路徑沒問題啊，順直一點點排查，發現重定向成功了，但是頁面沒刷新

　解決方法：

　　通過仔細觀察，重定向的過程，發現會先執行舊路由，再進行重定向，那么可以統一配置舊路徑，讓其刷新。router中

  {path: '*',meta:{title: '學部'}, component: resolve => require(['../pages/NotFound/Index.vue'], resolve)},

 

　　 使用通配符，讓之前沒有寫路徑規則的頁面，統一跳轉到一個新的頁面，讓再新頁面判斷是否是重定向過來的。NotFound頁面的代碼

    beforeRouteEnter(to,from,next){
      next(vm => {
        console.warn(to.redirectedFrom)
        if(to.redirectedFrom){//vue-router redirect不會刷新頁面，需要判斷並刷新
          // vm.$router.go(0)//safari瀏覽器go(0)無效
          window.location.reload()
        }
      })
    },

　　重定向的頁面會有redirectedFrom這個屬性，然后讓其刷新即可。