問題:

最近些日子項目中突然碰到了一個需求，再完成編輯操作之后需要進行頁面刷新，通過實驗有如下幾種姿勢可以解決需求中的問題，下面進行簡單總結如下。

姿勢一：this.$router.go(0)
這個姿勢是利用了 history 中前進和后退的功能，傳入 0 刷新當前頁面。但是有一個問題就是頁面整個刷新過程中會白屏，嚴重影響用戶的體驗感，效果不好。

this.$router.go(0)

姿勢二：location.reload()

這個姿勢是利用了直接使用刷新當前頁面的方法。但是同樣存在有一個問題就是頁面整個刷新過程中會白屏，嚴重影響用戶的體驗感，效果也是不好，和姿勢一的現象一直，也不推薦使用。

location.reload()

姿勢三：provide / inject組合(推薦使用)

允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。
provide：選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。
inject：一個字符串數組，或一個對象，對象的 key 是本地的綁定名。
注意：provide和inject綁定并不是可響應的。這是刻意為之的。如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的。

基本使用步驟如下：

步驟一：（App.vue）
通過 $nextTick()，協助實現。先把 移除，移除后再重新添加，達到刷新當前頁面的功能。是目前最合適的實現方式。

<template><div id="app"><router-view v-if="isRouterAlive"/></div> </template><script> export default {name: 'App',provide () {return{reload: this.reload}},data() {return {isRouterAlive: true}},methods:{reload(){this.isRouterAlive = falsethis.$nextTick(function(){this.isRouterAlive = true})}} } </script>

步驟二：（chapter.vue）

inject: ['reload'],

代碼結構

步驟三：（chapter.vue）
直接this.reload()調用，即可刷新當前頁面。

this.reload()// 需要刷新頁面

總結

以上是生活随笔為你收集整理的Vue刷新当前页面几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。