vue_相同組件，不同url跳轉不重新渲染的解決方案

標籤：需要   不同   cti   工作   nextTick   種類型   相同   random   nbsp   

最近寫的這個項目，有很多下拉式功能表，每個菜單會有相應的兩種類型。現在產品的需求是，跳轉到不同的類型 需要頁面重新渲染資料

那麼問題來了。

我試了好幾種方法，用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))

　　}

}

vue_相同組件，不同url跳轉不重新渲染的解決方案