axios减少重复请求数据 keep-alive

Vue路由开启keep-alive时的注意点：
https://blog.csdn.net/qq_32786873/article/details/71171713

<template>
    <div id="app">
      <!--exclude="deta" 不使用缓存  和activated()类似 -->
      <keep-alive exclude="deta"> 
        <router-view/>
      </keep-alive>
    </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

1 name 
   1.1 用于递归的调用
   1.2 用于取消缓存的
   

1

    <keep-alive ></keep-alive >
     缓存的数据
       
     重新再发起请求
     activated() { }

<template>
<div>
    <homeheader ></homeheader>  
    <homeswiper :list="swiperList"></homeswiper>
    <homeicons  :list="iconList"></homeicons>
    <recommend  :list="recommendList"></recommend>  
    <homeweeked :list="weekendList"></homeweeked>
</div>
</template>

<script>
import {mapState} from 'vuex'
import homeheader from './components/header'
import homeswiper from './components/swiper'
import homeicons from './components/icons'
import recommend from './components/recommend'
import homeweeked from './components/weekend'
import axios from 'axios'
export default {
  name:'home',
  components: {
    homeheader,
    homeswiper,
    homeicons,
    recommend,
    homeweeked
  },
  data () {
    return {
      lastcity:[],
      swiperList:[],
      iconList:[],
      recommendList:[],
      weekendList:[]
    }
  },
  computed:{
    ...mapState(['city'])
  },
  // axios.get('/static/mock/index.json')
  methods:{
    getgomeinfo () {
      axios.get('/static/mock/index.json?city='+this.city)
        .then(this.gethomrinfosuc)
    },
    gethomrinfosuc(res){
     res=res.data
     if(res.ret && res.data){
       const data=res.data
       this.swiperList=data.swiperList
       this.iconList=data.iconList
       this.recommendList=data.recommendList
       this.weekendList=data.weekendList
     }
    }
  },
  mounted() {
    this.lastcity=this.city
    this.getgomeinfo()
 console.log("activated11")
  },
  activated() {
    console.log("activated")
     if(this.lastcity!==this.city){  //值不同的时候发生改变
       this.lastcity=this.city  //让上一次城市发生改变
         this.getgomeinfo() //
          console.log("进入activated")
     }
  }

}
</script>

<style lang="stylus" scoped>

 
</style>

参考方法
https://blog.csdn.net/stubbor/article/details/73739765 生命周期
https://www.cnblogs.com/webbest/p/6722780.html 生命周期
https://www.cnblogs.com/sysuhanyf/p/7454530.html keep-alive详解