Vue实现$router.push相同路由刷新子组件(同理可实现子组件刷新兄弟组件) - Vue.js

业务需求：在父组件下有两个子组件A和B，现在要实现点击A的某个按钮会执行$router.push跳转路由，如果遇到跳转路由与当前路由相同的情况下，要进行刷新当前路由，并且A组件不可刷新，仅仅刷新B组件。但是发现会报错，错误提示如下：

解决方案：

第一步、设置A组件，代码如下：

<template>
  <div>
    <h1>这是A组件 <input placeholder="这里输入内容，可以检测是否刷新A组件"></h1>
  </div>
</template>
<script>
  export default {
    name: 'A'
  }
</script>

第二步、设置B组件，代码如下：

<template>
  <div>
    <h1>这是B组件 <input placeholder="这里输入内容，可以检测是否刷新B组件"></h1>
  </div>
</template>
<script>
  export default {
    name: 'B'
  }
</script>

第三步、设置导航组件，代码如下：

<template>
  <div id="app">
    <div>
      <Nav :isRouterAliveNum.sync="isRouterAliveNum"></Nav>
      <router-view v-if="isRouterAlive" />
    </div>
  </div>
</template>
<script>
  import Nav from "@/components/Nav";
  export default {
    components: {Nav},
    data: () => ({
      isRouterAliveNum:0,
      isRouterAlive: true,
    }),
    watch: {
      isRouterAliveNum(){
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      }
    }
  }
</script>
<style scoped>
</style>

方案详解：
1、首先在父组件App.vue中引入了Nav导航组件及router-view
2、在router-view上设置了v-if，将父组件属性isRouterAlive设置为布尔值，默认true标识默认router-view载入
3、在父组件中设置属性isRouterAliveNum,默认值0，并为其增加监听器，将其传递给子组件Nav，在Nav组件中设置props: ['isRouterAliveNum']
4、在Nav组件中设置了myIsRouterAliveNum属性，默认0，并为其设置了监听器，一旦该属性值有变化则触发监听事件
5、在Nav组件中，对导航按钮A和B绑定了单击事件触发openNav方法，实现跳转对应路由
6、在openNav方法中进行了判断，如果跳转目标路由与当前路由不同，则直接调用this.$router.push方法进行跳转，
7、如果跳转目标路由与当前路由相同，则修改myIsRouterAliveNum自增1，变相触发myIsRouterAliveNum监听事件，通过执行 this.$emit('update:isRouterAliveNum', this.isRouterAliveNum + 1)实现修改父级组件App.vue中的isRouterAliveNum属性自增1，进而触发isRouterAliveNum的监听事件，执行this.isRouterAlive = false;销毁router-view，接着在this.$nextTick回调方法中再将this.isRouterAlive设置为true，实现重新载入router-view，进而实现子组件的重载(刷新)
8、根据以上原理，也可实现父组件局部刷新子组件