URL unchanged in the case, the most practical vue refresh the current page, provide / inject combinations to achieve vue page refresh

Original: https://blog.csdn.net/Dream_xun/article/details/83024487

Additional references: https://blog.csdn.net/liyunkun888/article/details/89022149    due router-view is multiplexed, simply change the value of the id and does not refresh the router-view

This is one of the most practical vue refresh the current page, otherwise there will be a general moment of blank pages, experience is not good, equivalent to pressing ctrl + F5 to force a refresh kind of
way: provide / inject combinations to achieve vue page refresh

1. Modify the code as shown App.vue

 

By declaring reload method, control isRouterAlice property true or false to control the router-view display or hide, and thus control the page is loaded again

2. Fill App.vue components need to refresh the page in the current page provided (provide) the dependence reload, and then directly this.reload to call on the line

 

App.vue code is as follows:

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

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