Vue路由嵌套刷新后页面没有重新渲染

Vue路由嵌套刷新后页面没有重新渲染

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

问题

在路由嵌套时，如果此时地址栏到了子路由下面，刷新页面路由地址肯定不会有变化，那么此时会出现子路由页面没有重新渲染的情况。

解决方法

方法1

在子路由的容器在router-view中加上条件渲染 v-if ，默认为true。让它显示出来，在父路由重新渲染完成后，将条件渲染的值变为false，在修改渲染条件数据之后使用 $nextTick，再将条件渲染的值变为true，相当于重新加载了一次子路由。

//步骤一
<router-view v-if="routerAlive"></router-view>

data(){
   
        return{
   
          routerAlive:true,
        }
      },

mounted() {
   
		//步骤二
        this.routerAlive = false;
        //步骤三
        this.$nextTick(()=>{
   
          this.routerAlive = true;
        });
      }

方法2

其实上述方法的原理就是让浏览器认为是一个新的子路由，所以对其进行重新加载渲染，同理，另一种方法是给容器router-view一个key值即可完美解决，每次刷新的随机值都让容器看上去是一个新的。

<router-view :key="Math.random()"></router-view>

总结

方法一看上去更繁琐，但亲测响应速度比方法二快。