7.keep-alive

包裹路由-组件。缓存组件，之后组件不会被销毁。组件对应的生命周期函数不会重新触发。

//App.vue
  <keep-alive>
         <router-view/>
   </keep-alive>

使用keep-alive包裹之后会多那两个生命周期函数,activated（）和 deactivated()

4-1使用activated(){}替代mounted(){}发送请求

export default {
        name:"Detail",
        data(){
            return{
                imgUrl:""
            }
        },
        mounted(){},
        activated(){
            var id=this.$route.params.id;
            var url=`http://192.168.14.49:5000/playlist/detail?id=${id}`;
            this.axios.get(url).then(res=>{
               this.imgUrl=res.data.playlist.creator.avatarUrl;
            })
            console.log("发送detail-http")
        },

4-2还可以使用exclude

//exclude：不包含哪一个.vue页面,一定要给组件name属性
<script>
    export default {
        name:"Detail",   //name名必须加
        data(){
            return{
                imgUrl:""
            }
        },
        mounted(){
            var id=this.$route.params.id;
            var url=`http://192.168.14.49:5000/playlist/detail?id=${id}`;
            this.axios.get(url).then(res=>{
               this.imgUrl=res.data.playlist.creator.avatarUrl;
            })
            console.log("发送detail-http")
        },
    }
</script>
//App.vue
<keep-alive exclude="Detail">   
     <router-view/>
</keep-alive>