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