实时视频流index页全局刷新改为provide+inject组合局部刷新

src/App.vue

@@ -1,11 +1,30 @@
 <template>
     <div id="app">
-        <router-view />
+        <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( function () {
+                this.isRouterAlive = true
+            })
+        }
+    },
     mounted() {
         window.onmessage = e => {
             if (!e.data.id) return;

src/views/realTimeMonitoring/index.vue

@@ -72,6 +72,7 @@ export default {
             num:240
         };
     },
+    inject: ['reload'],
     mounted() {
         this.getRealTimeList()
         // this.getVideos()
@@ -84,9 +85,9 @@ export default {
     },
     methods: {
         // 展开收起
-        handleUpDown() {
-            this.controlLabel = !this.controlLabel;
-        },
+        // handleUpDown() {
+        //     this.controlLabel = !this.controlLabel;
+        // },
         getRealTimeList(){
             var that=this
             this.$api.httpApi.getRealTimeList({
@@ -135,7 +136,7 @@ export default {
                 that.num = that.num-1;
                 console.log(that.num)
                 if(that.num == -1){
-                    location.reload();
+                    that.reload() //局部刷新
                     that.num = 240
                 }
             },1000)