# router-view和keep-alive # router-view是也是一個組件 如果被keep-alive包裹 所有的路徑匹配到的頁面都可以被緩存 # keep-alive 是vue內置的一個組件 可以使被包含的組件保留狀態 或避免重新渲染 # router-view 顯示組件的內容 # ``` <pre class="calibre13">``` <span class="token"><</span>router<span class="token">-</span>view<span class="token">></span><span class="token"><</span><span class="token">/</span>router<span class="token">-</span>view<span class="token">></span> ``` ``` 上面會顯示組件的內容 當用戶進行組件切換的時候 組件渲染頁面是經過了創建和銷毀的過程 ``` <pre class="calibre13">``` <span class="token"><</span>keep<span class="token">-</span>alive<span class="token">></span> <span class="token"><</span>router<span class="token">-</span>view<span class="token">></span><span class="token"><</span><span class="token">/</span>router<span class="token">-</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>keep<span class="token">-</span>alive<span class="token">></span> ``` ``` 如果包裹在keep-alive里面的時候 組件切換的時候仍然保留自身組件的狀態 比如字體的顏色等 組件切換的時候 不會被銷毀也不會被創建 保留了組建的狀態