vue重新加载/刷新当前页面 改变url参数触发页面生命周期

vue页面在实际开发中，经常会遇到改变url参数，重新加载页面数据的需求，但是只改变页面url并不会触发组件的生命周期，这就需要用其他方法来实现了。

一、this.$router.go(0) 和 location.reload()

相当于刷新浏览器，会重新加载页面资源，体验相当差。

二、推荐使用：provide / inject 组合

在index.vue（与页面结构有关）文件，声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。

<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>

原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

在需要使用的子页面通过inject属性接收，直接调用this.reload()，只加载当前组件，并且触发组件的生命周期函数，不会刷新整个网站，效果很好

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

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