Lassen Sie uns darüber sprechen, wie Sie die aktuelle Seite in vue3 aktualisieren

In diesem Artikel erfahren Sie, wie Sie die aktuelle Seite in vue3 aktualisieren können. Ich hoffe, dass er für alle hilfreich ist.

1. Geschäftsszenario

Wenn wir die Tabellendaten löschen oder bearbeiten, fordern wir im Allgemeinen die Schnittstelle erneut auf, um die Tabellendaten zu aktualisieren. Wenn mehrere Schnittstellen gleichzeitig angefordert werden müssen, können Sie nicht jede Schnittstelle einzeln anpassen. Wir müssen einen freundlicheren Weg wählen, um dies zu erreichen.

2. Implementierungsideen

Die erste und intuitivste Möglichkeit besteht darin, die aktuelle Seite direkt zu aktualisieren, beispielsweise mit den Methoden location.reload und $router.go(0). Diese Methode führt jedoch dazu, dass die Seite einen weißen Bildschirm hat, was nicht benutzerfreundlich ist. Können wir also die aktuelle Vue-Komponente aktualisieren? Wir wissen, dass beim erneuten Rendern einer Vue-Komponente ihr gesamter Lebenszyklus erneut ausgeführt wird und die Schnittstelle natürlich erneut angefordert wird. Wie kann man also die aktuelle Komponente aktualisieren? Die erste besteht darin, das Rendering der aktuellen Seitenkomponente über v-if zu steuern. Im Fall der router-view-Rendering-Komponente fügen wir v-if direkt zu router-view hinzu. Durch die Steuerung dieser Beurteilungsbedingung nennen wir sie dann beispielsweise isRouterAlive. location.reload和$router.go(0)方法。但是这种方式会导致页面会有白屏情况，不友好。那么我们能不能刷新当前的vue组件呢？我们知道当vue的组件重新渲染以后它的整个生命周期会重新执行一遍，接口自然而然的也会重新请求一遍的。那么多如何刷新当前组件呢？首先是通过v-if来控制当前页面组件的渲染。在有router-view渲染组件的情况下，我们直接把v-if加在router-view上面。然后通过控制这个判断条件，比如我们就叫做isRouterAlive。

那么这个判断条件如何控制呢？因为涉及到跨组件通信，所以需要使用provide/inject。在router-view组件中通过provide提供一个relaod方法，当删除或者编辑完成表格数据以后，使用inject触发reload方法。在reload方法里面我们来控制判断条件。当realod的时候isRouterAlive=false,紧接着在nextTick中设置为true,这样就可以实现组件重新加载了。

下面我们来看看代码逻辑的实现。

3.代码实现

首先修改router-view

Wie kann man also diese Beurteilungsbedingung kontrollieren? Da es sich um eine komponentenübergreifende Kommunikation handelt, muss provide/inject verwendet werden. Stellen Sie eine Reload-Methode über provide in der router-view-Komponente bereit. Verwenden Sie nach dem Löschen oder Bearbeiten der Tabellendaten inject, um die Reload-Methode auszulösen. Bei der Reload-Methode steuern wir die Beurteilungsbedingungen. Wenn realod, isRouterAlive=false, dann setzen Sie es in nextTick auf true, damit die Komponente neu geladen werden kann.

Werfen wir einen Blick auf die Implementierung der Codelogik. 3. Code-Implementierung Auf diese Weise entsteht keine leere Seite, kein schneller Wechselvorgang in der Adressleiste und die Benutzererfahrung ist sehr benutzerfreundlich.

Empfohlenes Lernen: „

Vue-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie die aktuelle Seite in vue3 aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!