Vue——keep-alive和記憶之前的狀態

一、keep-alive

能夠讓組件不再頻繁地創建頻繁地銷燬，能夠提高性能

二、keep-alive使用

在App.vue中用該標籤包含主

 <keep-alive>
      <router-view></router-view>
 </keep-alive>

• keep-alive包含兩個重要的屬性

  • include和exclude

  • 實現：我們希望每次進入檔案都刷新一下

    <keep-alive exclude="Profile">
          <router-view></router-view>
    </keep-alive>
    
    // 如果有多個
    <keep-alive exclude="Profile,User">
          <router-view></router-view>
    </keep-alive>
    

三、延伸的問題

keep-alive可以保存上個組件不被銷燬，那麼上個組件的狀態如何保存呢？

例如：

此處我們點到了消息，再次跳轉到關於，如果我再次點擊首頁，能否讓其顯示還是消息，而不是默認的新聞

• 解決方案：

  • 在Home.vue中的data()添加path路徑，用來記錄默認的新聞路徑，然後利用actived()函數通過this.$router.push(this.path)自動顯示新聞，緊接着，我們利用beforeRouteLeave(to, from, next)，將當前路由的path傳給data中的path，進行保存，那麼下一次回來actived調用的便是該path

  • 實現：

    // Home.vue
    
    <template>
        <div>
          <h2>我是首頁</h2>
          <p>我是首頁內容哈哈哈</p>
    
          <router-link to="/home/news">新聞</router-link>
          <router-link to="/home/message">消息</router-link>
          <!-- 添加子組件的router-view-->
          <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default {
          name: "Home",
          data(){
            return{
              path: '/home/news'
            }
          },
          created() {
    
          },
          activated() {
            // 路由跳轉
            // 只有<keep-alive>使用的時候纔有效
            this.$router.push(this.path)
          },
          beforeRouteLeave(to, from, next) {
            // 在離開當前路由之前將當前路由path給到data中的path
            // this.path = this.$route.path
            this.path = from.path
            next()
          }
        }
    </script>
    
    <style scoped>
    
    </style>