vueプロジェクトの現在のページを更新する3つの方法

おそらく、vueを掘るときに、誰もが次の状況に遭遇したと思われます。たとえば、レコードを削除または追加するときに、現在のページを更新できるか、次のようになります。

現時点で、私たちの最も直接的な考え方は、次のことを考えることです。

しかし、試してみると、vue-routerを使って現在のページに再ルーティングすると、ページが更新されず、まったく効果がないことがわかります〜この方法はありません!


以下では、いくつかの注目すべき3つの方法を整理します。自分で選択できます。

1.ページ全体を最も直接的に更新します。

ロケーション。reload()
this。$ router.go(0)

どちらも現在のページを更新できます。欠点は、ctrl + F5を押して強制的に更新するのと同じことです。ページ全体を再読み込みすると、すぐに空白のページが表示されるため、これは悪い経験です。

2.新しい空白ページsupplierAllBack.vueを作成し、[OK]をクリックしたら、最初にこの空白ページにジャンプしてから、すぐに戻ります。

空白ページsupplierAllBack.vueの内容:

最初の方法と比較すると、空白のページはしばらく表示されませんが、アドレスバーにはクイック切り替えプロセスがあり、これを使用できます。

3.提供/注入の組み合わせ方法は、私が試した中で最も実用的です。以下にプロジェクトのスクリーンショットを示します。まず、app.vueを変更します。

ルータービューの表示または非表示を制御するためのreloadメソッドを宣言し、それによってページのリロードを制御することにより、ここで定義されます。

isRouterAlive //true or false 来控制

次に、App.vueコンポーネントによって提供されるリロード依存関係を、現在のページの更新が必要なページに挿入し、this.reloadを直接使用して呼び出します。

おすすめ

転載: blog.csdn.net/weixin_46034375/article/details/108965976