
怎么在Vue項目中實現(xiàn)一個路由刷新功能?針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

當(dāng)vue單頁面需要替換參數(shù)并刷新頁面時,這個時候使用this.$router.push或this.$router.replace會發(fā)現(xiàn)路由改變了,但是頁面上的數(shù)據(jù)并沒有實時刷新。在網(wǎng)上找到了以下幾種方法,親測可用:
this.$router.go(0)
在具體頁面中,先通過this.$router.push或this.$router.replace替換路由,隨后調(diào)用this.$router.go(0),頁面就會強(qiáng)制刷新,但是該強(qiáng)制刷新與F5刷新效果類似,頁面會有空白時間,體驗感不好;
provide/inject
首先在app.vue頁面中增加如下配置:
然后在具體頁面中加上inject配置,具體如下:
export default {
name: 'orderAndRandom',
// 就是下面這行
inject: ['reload'],
data() {},
// 省略
}加上配置后,在調(diào)用this.$router.push或this.$router.replace替換路由后,再新增this.reload()就可以實現(xiàn)頁面內(nèi)數(shù)據(jù)刷新。
關(guān)于怎么在Vue項目中實現(xiàn)一個路由刷新功能問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。