keep-alive用法及（activated,deactivated生命週期）

<template>
    <div id="app">
        <!-- <img src="./assets/logo.png"> -->
         <ul>
            <li><router-link to='/'>helloworld</router-link><li>
            <li><router-link to='/echart'>echart</router-link><li>
            <li><router-link to='/map'>map</router-link></li>
        </ul>
        
        <!-- <router-view></router-view> -->
 
        <!-- 方法一：緩存全部的 -->
        <keep-alive>
            <router-view/>
        </keep-alive>
 
        <!-- 方法二 -->
        <!-- 緩存模塊名爲List的模塊，不會重複請求，其它模塊重複請求 -->
        <keep-alive include="List">
            <router-view/>
        </keep-alive> 
        <!-- 不緩存模塊名爲List的模塊，會重複請求，其它模塊緩存 -->
        <keep-alive exclude="List">
            <router-view/>
        </keep-alive>
 
        <!-- 方法三 -->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view> 
    </div>
</template>
 
<script>
    export default {
        name: 'App'
        // activated,deactivated這兩個生命週期函數必定是要在使用了keep-alive組件後纔會有的，不然則不存在
        activated(){
            console.log('activated頁面打開時觸發');
        },
        deactivated(){
            console.log('deactivated頁面關閉時觸發');
        }
    } 
</script> 
<style scoped> 
</style>