vue_相同組件，不一樣url跳轉不從新渲染的解決方法

最近寫的這個項目，有不少下拉菜單，每一個菜單會有相應的兩種類型。如今產品的需求是，跳轉到不一樣的類型 須要頁面從新渲染數據

那麼問題來了。

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

　　}

}