vue プロジェクトは空白のページからジャンプせずに現在のページをどのように更新しますか

1. ページ全体を更新する最も直接的な方法:

 this.$router.go(0);//刷新
 location.reload(); //刷新

  注: どちらも現在のページを更新できます。欠点は、Ctrl+F5 を押して強制的に更新するのと同じことです。ページ全体が再ロードされると、すぐに空白のページが表示され、エクスペリエンスが良くありません。 ！！！

2. 新しい空白のページsupplierAllBack.vueを作成します。「OK」をクリックすると、最初にこの空白のページにジャンプし、すぐに戻ります。ここでは省略します！！！

3.provide/injectの併用

reloadメソッドを宣言することでルータービューの表示・非表示を制御し、ページのリロードを制御します。

isRouterAlive ---true または false を制御します

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

 まず、App.Vue を次のように変更します。

<template>
    <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
    </div>
</template>
<style>
@import './assets/css/main.css';
/* 深色主题  */
@import './assets/css/color-dark.css';
</style> 

<script>
export default {
    name: 'app',
    provide() {
        return {
            reload: this.reload
        };
    },
    data() {
        return {
            isRouterAlive: true
        };
    },
    methods: {
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        }
    }
};
</script>

次に、次のように使用して呼び出します。