vue_相同组件，不同url跳转不重新渲染的解决方法

Posted 2021-01-04 qingcui277

最近写的这个项目，有很多下拉菜单，每个菜单会有相应的两种类型。现在产品的需求是，跳转到不同的类型 需要页面重新渲染数据

那么问题来了。

我试了好几种方法，用watch监听路由去判断，但是发现输在input里面的值是不会被替换掉的

所以想到了用key 去如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

因为工作性质，不能贴代码

所以

<router-view v-if="isRouterActive" :key="key"></router-view>

 

data(){

　　return isRouterActive:true,

　　key:‘‘

}

watch:{

　　　‘$route‘(to,from){

　　　　　　this.isRouterActive = false;

　　　　　　this.key = Math.random()*1000;

　　　　　　this.$nextTick(()=>(this.isRouterActive = true))

　　}

}