vue-router重定向不刷新問題的解決
更新時間：2018年06月25日 10:48:54 作者：無敵小坑筆
本篇文章主要介紹了vue-router重定向不刷新問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前陣子太忙了，自己一個人一邊開發(fā)著新項目，一邊維護著舊項目，沒時間寫博客，終于讓我騰出時間了。廢話少說，開始正文。
問題描述:
之前項目是angular開發(fā)的，后來用vue重構(gòu)后。項目路徑和vue路徑不一致，但是app端分享出的鏈接，依舊是舊項目鏈接。
解決方法：
通過閱讀vue-router的官方文檔，發(fā)現(xiàn)重定向可以解決這個問題。
如之前文件路徑是'/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)},
新的問題：
本來以為重定向就萬事大吉了，結(jié)果發(fā)版后，有用戶反饋是空白頁面。我仔細看了路徑?jīng)]問題啊，順直一點點排查，發(fā)現(xiàn)重定向成功了，但是頁面沒刷新
解決方法：
通過仔細觀察，重定向的過程，發(fā)現(xiàn)會先執(zhí)行舊路由，再進行重定向，那么可以統(tǒng)一配置舊路徑，讓其刷新。router中
復(fù)制代碼 代碼如下:
{path: '*',meta:{title: '學(xué)部'}, component: resolve => require(['../pages/NotFound/Index.vue'], resolve)},
使用通配符，讓之前沒有寫路徑規(guī)則的頁面，統(tǒng)一跳轉(zhuǎn)到一個新的頁面，讓再新頁面判斷是否是重定向過來的。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這個屬性，然后讓其刷新即可。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
之前發(fā)了不少了去除字符串空格的代碼，但都是去除開始與結(jié)尾的，下面的這段代碼可以去除中間的。2009-08-08
Jquery Autocomplete 結(jié)合asp.net使用要點
Jquery的Autocomplete是一個很好的智能提示插件，但是在實際使用過程中還是會遇到一些小問題.2010-10-10
javascript 通用簡單的table選項卡實現(xiàn)
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js，而且每遇到選項卡就加一點js，造成垃圾低劣代碼逐漸堆積過多了，一直想做一個通用簡潔的選項卡庫。2010-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)中文實時時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細介紹了Javascript技術(shù)棧中的四種依賴注入，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多張照片上傳功能,當服務(wù)器的狀態(tài)碼為200且圖片上傳完畢后將圖片的src轉(zhuǎn)化為Json字符串存在數(shù)組中以便將其添加到數(shù)據(jù)庫,本文通過實例代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
在TypeScript中就像在EC5中一樣,任何包含頂級import或export的文件都被認為是一個模塊,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript使用模塊化以及注意事項的相關(guān)資料,需要的朋友可以參考下2022-10-10
本文將介紹一下Js獲取Gridview選中行的內(nèi)容的過程及步驟:取得gridview中獲取選中行指定列的值.獲取鼠標點擊的元素等等，感興趣的朋友可以了解下，或許對你學(xué)習(xí)js方面知識有所幫助2013-02-02
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)移動端橫豎屏檢測，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JavaScript實現(xiàn)單例模式實例以及代碼講解，有需要的讀者們跟著學(xué)習(xí)參考下吧。2017-12-12