溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在Vue項目中實現一個路由刷新功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
當vue單頁面需要替換參數并刷新頁面時，這個時候使用this.$router.push或this.$router.replace會發現路由改變了，但是頁面上的數據并沒有實時刷新。在網上找到了以下幾種方法，親測可用：
this.$router.go(0)
在具體頁面中，先通過this.$router.push或this.$router.replace替換路由，隨后調用this.$router.go(0)，頁面就會強制刷新，但是該強制刷新與F5刷新效果類似，頁面會有空白時間，體驗感不好；
provide/inject
首先在app.vue頁面中增加如下配置：
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
isRouterAlive: true
}
},
provide() {
return {
reload: this.reload
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>然后在具體頁面中加上inject配置，具體如下：
export default {
name: 'orderAndRandom',
// 就是下面這行
inject: ['reload'],
data() {},
// 省略
}加上配置后，在調用this.$router.push或this.$router.replace替換路由后，再新增this.reload()就可以實現頁面內數據刷新。
關于怎么在Vue項目中實現一個路由刷新功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
