Vue專案重新整理當前頁面解決方法

在很多專案中，實現修改、刪除某項資料成功後，需要自動重新整理。

但是像go()或者reload()等函式，確實可以實現重新整理，但是這種重新整理是重新整理瀏覽器，頁面會出現空白，然後重新渲染資料，使用者體驗不是很好。

在vue專案中，可以利用vue-router重新路由，但是重新路由前和重新路由後，這兩個路由是相同的話，頁面是不會進行重新整理的。

既然重新路由前後兩個路由相同的話，頁面不會重新整理，那我們可以先路由到乙個中介頁面，然後再路由到需要重新整理的頁面。相當於，要想重新整理頁面一，先從頁面一跳轉到頁面二，然後再從頁面二跳轉到頁面一。

普通的路由，如，/home/mentaltest/list，重新整理時，呼叫shallowrefresh()函式。

_g.
shallowrefresh
(this
.$route.name)

shallowrefresh
(name)})
},

傳入當前要重新整理的頁面的name值，頁面跳轉到中介頁面refresh.vue。

refresh頁面**如下


<
/div>
<
/template>
export
default)}
elseif(
this
.$route.query.name))}
else}}
<
/script>

由於我在呼叫shallowrefresh()函式只傳入了this.$route.name，所以在replace頁面跳轉到refresh時，query裡只有name有值，（即this.$route.query.name不為空，而this.$route.query.query為空），所以第乙個if為false，執行第二個if判斷。這時，replace頁面跳轉到name為this.$route.query.name的頁面。

如果需要重新整理的頁面帶有query值，如/home/mentaltest/eidt?id=38，重新整理時，呼叫shallowrefresh_()函式。

這時，函式裡的引數，不僅需要把路由name傳過去，還需要把路由的query值傳過去（即id=38）。

_g.
shallowrefresh_
()

shallowrefresh_
(query))}
,

此時，shallowrefresh_()函式裡的引數query傳入的是乙個物件，裡面放$route.name和$route.query，在replace頁面跳轉到refresh時，攜帶著this.$route.name和this.$route.query資料。在refresh頁面時，滿足第乙個if判斷，這時，replace頁面跳轉到name為this.$route.query.name的頁面，且其query值為this.$route.query.query。

params和query的區別，params是針對this.$router.name的，如果使用params傳參，那配路由檔案時，name不要忘了/:id

像this.$router.push和this.$router.replace這些函式，引數都是乙個物件，可以通過路由的name進行跳轉，也可以通過路由的path進行跳轉。

this
.$router.
push(}
)this
.$router.
push(}
)this
.$router.
push(}
)

第一種情況，路由會是/home/index/123，第

二、三種情況，路由會是/home/index?id=123

不過，push和replace的不同之處就是，push就好像是把新的乙個路由壓入乙個棧裡，可以通過go(-1)回到上乙個頁面；而replace則是新的乙個路由替換掉了上乙個路由，不能通過go(-1)回到上乙個頁面。

Vue專案重新整理當前頁面解決方法

vue專案重新整理當前頁面

vue專案重新整理當前頁面

vue專案重新整理當前頁面

Vue專案重新整理當前頁面解決方法

vue專案重新整理當前頁面

vue專案重新整理當前頁面

vue專案重新整理當前頁面

相關推薦