Vue路由嵌套刷新後頁面沒有重新渲染

問題

在路由嵌套時，如果此時地址欄到了子路由下面，刷新頁面路由地址肯定不會有變化，那麼此時會出現子路由頁面沒有重新渲染的情況。

解決方法

方法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>

總結

方法一看上去更繁瑣，但親測響應速度比方法二快。