Vue recarga/actualiza la página actual y cambia el parámetro de URL para activar el ciclo de vida de la página

En el desarrollo real de páginas vue, a menudo es necesario cambiar los parámetros de la URL y volver a cargar los datos de la página, pero solo cambiar la URL de la página no activará el ciclo de vida del componente, lo que requiere otros métodos para lograrlo.

1. this.$router.go(0) y ubicación.reload()

Equivale a actualizar el navegador, lo que recargará los recursos de la página y la experiencia es bastante pobre.

2. Uso recomendado: combinación proporcionar/inyectar

En el archivo index.vue (relacionado con la estructura de la página), declare el método de recarga para controlar la visualización u ocultación de la vista del enrutador, controlando así la recarga de la página.

<template>
  <div>
    <menu-top></menu-top>
    <menu-slide></menu-slide>
    <div class="app-content">
        <transition name="router-fades" mode="out-in">
            <router-view v-if="isRefresh"></router-view>
        </transition>
    </div>
  </div>
</template>
 
<script>
import MenuTop from "@/components/menu-top.vue";
import MenuSlide from "@/components/menu-slide.vue";
export default {
  provide () { //注入重新加载组件方法（子页面可以通过inject属性接收）
    return {
      reload: this.reload 
    }
  },
  components: {
    MenuSlide,
    MenuTop
  },
  data () {
    return {
      isRefresh: true
    }
  },
  methods: {
    async reload () {
      this.isRefresh= false
      await this.$nextTick()
      this.isRefresh= true
    }
  }
}
</script>

Principio: permitir que un componente ancestro inyecte una dependencia a todos sus descendientes, sin importar cuán profunda sea la jerarquía del componente, y siempre tendrá efecto cuando se establezcan las relaciones ascendentes y descendentes.

En la subpágina que necesita usarse, recíbala a través del atributo de inyección, llame a this.reload () directamente, solo cargue el componente actual y active la función de ciclo de vida del componente, sin actualizar todo el sitio web, el efecto es muy bueno.

<template>
    <div></div>
</template>

<script>
    export default {
        inject: ['reload'],
        methods:{
            reloadFun () {
                this.reload()
            }
        }
    }
</script>