前陣子太忙了,自己一個人一邊開發著新項目,一邊維護著舊項目,沒時間寫博客,終于讓我騰出時間了。廢話少說,開始正文。
問題描述:
之前項目是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中
使用通配符,讓之前沒有寫路徑規則的頁面,統一跳轉到一個新的頁面,讓再新頁面判斷是否是重定向過來的。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這個屬性,然后讓其刷新即可。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答