欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-router重定向不刷新問題的解決

 更新時(shí)間：2018年06月25日 10:48:54   作者：無敵小坑筆  
本篇文章主要介紹了vue-router重定向不刷新問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前陣子太忙了，自己一個(gè)人一邊開發(fā)著新項(xiàng)目，一邊維護(hù)著舊項(xiàng)目，沒時(shí)間寫博客，終于讓我騰出時(shí)間了。廢話少說，開始正文。

問題描述:

之前項(xiàng)目是angular開發(fā)的，后來用vue重構(gòu)后。項(xiàng)目路徑和vue路徑不一致，但是app端分享出的鏈接，依舊是舊項(xiàng)目鏈接。

解決方法：

通過閱讀vue-router的官方文檔，發(fā)現(xiàn)重定向可以解決這個(gè)問題。

如之前文件路徑是'/live/detail/id=7234'，'/skill/microList/',新項(xiàng)目路徑是 '/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ā)版后，有用戶反饋是空白頁面。我仔細(xì)看了路徑?jīng)]問題啊，順直一點(diǎn)點(diǎn)排查，發(fā)現(xiàn)重定向成功了，但是頁面沒刷新

解決方法：

通過仔細(xì)觀察，重定向的過程，發(fā)現(xiàn)會(huì)先執(zhí)行舊路由，再進(jìn)行重定向，那么可以統(tǒng)一配置舊路徑，讓其刷新。router中

復(fù)制代碼 代碼如下:
{path: '*',meta:{title: '學(xué)部'}, component: resolve => require(['../pages/NotFound/Index.vue'], resolve)},

使用通配符，讓之前沒有寫路徑規(guī)則的頁面，統(tǒng)一跳轉(zhuǎn)到一個(gè)新的頁面，讓再新頁面判斷是否是重定向過來的。NotFound頁面的代碼

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

重定向的頁面會(huì)有redirectedFrom這個(gè)屬性，然后讓其刷新即可。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論