请问老师，为什么在 keep-alive 上使用 exclude=“Detail” 之后，详情页面上的 header 就没有渐隐渐现的效果了呢？我看了一下老师在视频课程的最后也没有渐隐渐现的效果了。

<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class="banner-img" :src="bannerImg">
            <div class="banner-info">
                <div class="banner-title">
                    {{ this.sightName }}
                </div>
                <div class="banner-number">
                    <span class="iconfont banner-icon">&#xe6cf;</span>
                    {{ this.galleryImgs.length }}
                </div>
            </div>
        </div>
        <fade-animation>
            <common-gallery :imgs="galleryImgs" v-show="showGallery" @close="handleGalleryClose"></common-gallery>
        </fade-animation>
    </div>
</template>
<script>
    import CommonGallery from "common/gallery/Gallery";
    import FadeAnimation from "common/fade/FadeAnimation";

    export default {
        name: "DetailBanner",
        props:{
            sightName: String,
            bannerImg: String,
            galleryImgs: Array
        },
        data(){
            return {
                showGallery: false
            };
        },
        components:{
            CommonGallery,
            FadeAnimation
        },
        methods:{
            handleBannerClick(){
                this.showGallery = true
            },
            handleGalleryClose(){
                this.showGallery =  false
            }
        }
    }
</script>
 
<style lang="stylus" scoped>
    .banner
        position : relative
        overflow : hidden
        height : 0
        padding-bottom : 55%
        .banner-img
            width : 100%
        .banner-info
            display : flex
            position : absolute
            left : 0
            right : 0
            bottom : 0
            line-height : .6rem
            color : #ffffff
            background-image : linear-gradiant(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
            .banner-title 
                flex : 1
                font-size : .32rem
                padding : 0 .2rem
            .banner-number
                height : .32rem
                margin-top : .14rem 
                padding : 0 .4rem
                line-height .32rem
                border-radius : .2rem
                font-size : .24rem
                background : rgba(0, 0, 0, 0.8);
                .banner-icon
                    font-size : .24rem
</style>

detail>components 里的 Header.vue

<template>
    <div>
        <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
            <div class="iconfont header-abs-back">&#xe676;</div>
        </router-link>
        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            <router-link to="/">
                <div class="iconfont header-fixed-back">&#xe676;</div>
            </router-link>
            景点详情
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "DetailHeader",
        data(){
            return {
                showAbs : true,
                opacityStyle: {
                    opacity: 0
                }
            };
        },
        activated(){
            // 对 window 做事件绑定，这么做将会影响到其他组件
            // 在从当前组件回到首页时，再去上下滑动页面，仍然会触发 handleScroll
            // 因为是对 window 绑定的事件，所以会影响全局
            window.addEventListener("scroll", this.handleScroll);
        },
        // 为了解绑全局事件，需要在 deactivated 钩子函数中移除之前绑定的全局事件
        deactivated(){
            window.removeEventListener("scroll", this.handleScroll);
        },
        methods:{
            handleScroll(){
                console.log("scrolling...");
                const top = document.documentElement.scrollTop;
                if (top > 60) {
                    let opacity = top / 140
                    opacity = opacity > 1 ? 1 : opacity
                    this.opacityStyle = {
                        opacity
                    }
                    this.showAbs = false
                } else {
                    this.showAbs = true
                }
            }
        }
    }
</script>
 
<style lang="stylus" scoped>
@import "~@/assets/styles/varibles.styl";
    .header-abs
        position : absolute
        left : .2rem
        top : .2rem
        width : .8rem
        height : .8rem
        line-height : .8rem
        text-align : center
        border-radius : .4rem
        background : rgba(0, 0, 0, .8)
        .header-abs-back
            color : #fff
            font-size : .4rem
    .header-fixed
        z-index : 2
        position : fixed 
        top : 0
        left : 0
        right : 0
        height : $headerHeight
        line-height : $headerHeight
        text-align : center
        color : #fff
        background : $bgColor
        font-size : .32rem
        .header-fixed-back
            position : absolute
            top : 0
            left : 0
            width : .64rem
            text-align : center
            font-size : .4rem
            color : #fff
</style>