Vue中刷新当前路由的方法

问题场景

• 项目开发中经常会遇到完成某些操作，刷新当前路由的需求。
  • 问题：比如当我们使用动态组件时，从列表页进入编辑页面，没有牵扯到路由的变动，只是动态加载了不同的组件而已。那么当你编辑完成后，又想回到列表页，此时的列表页还是会停留在没有编辑前的状态。
  • 期望效果：从列表页—>点击编辑—>进入编辑页（路由未改变）—>编辑完成—>刷新路由—>回到列表页—>展示编辑后的最新状态

解决办法

• 方法一：暴力解决-强制整个页面进行刷新
  • 1.使用this.$router.go(0)函数，可以强制刷新当前页面
  • 2.使用window.location.href或者window.location.reload()，强制刷新当前页面
  • 注： 问题：以上两种处理都会是当前页面进行刷新，浏览器进行重新加载，出现页面闪烁和空白，极大的降低了用户体验。
• 方法二：优雅解决-借助vue的选项/组合 provide/inject （完美方案）
  • 在app.vue中：

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

<script>
export default {
  name: 'App',
  data() {
    return {
      // 控制router-view的隐藏与显示
      isShow: true
    }
  },
  provide() { // 提供可注入子组件属性
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() { // 定义加载方式
      // 先取消当前路由的视图展示，待dom重新渲染完毕，再让当前路由视图展示
      this.isShow = false 
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  }
}
</script>

• 在要刷新路由的子孙组件中----使用inject进行接收注入的依赖

export default {
  name: 'EditApp',
  inject: ['reload'], // 接收注入的数据（负责刷新路由）
}

• 在要刷新路由的子孙组件中----编辑成功后，刷新当前路由

editAPP(JSON.stringify({
	 'app_content': '编辑的内容',
	 'app_title': '编辑的标题',
	 'id': 1
})).then(response => {
   	if (response.errcode === 1) {
     this.reload() // 刷新当前路由
   }
})

注： provide/inject这对选项要组合使用，以允许一个祖先组件向其所有的子孙后代组件注入依赖，不论层次有多深，这样在所有子孙后代里，均可方便实现刷新路由功能。

到此，一个完美的刷新路由的方案就展示完毕啦~
欢迎小伙伴们留言交流，并提出你们的宝贵建议噢~