在路由切换（页面跳转时），每一次都发送了Ajax请求。因为每次页面跳转组件都会被重新渲染，mounted钩子都会被执行，Ajax数据每次都要去获取，这样导致效率低。

在程序的入口组件App.vue中，<router-view>显示的是路由所对应的内容。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

我们可以为它包裹一个<keep-alive>标签。这是view自带的标签。使路由被加载过之后，将组件放在内存中，下次再跳转回页面时，直接从内存中取数据，不再发送Ajax请求。

<template>
  <div id="app">
    <!-- keep-alive让路由的内容在被加载过之后防止内存中，下次访问不需要重新加载渲染，不再动钩子 -->
    <!-- 想要不缓存某个组件就写在exclude里,和activated作用一样 -->
    <keep-alive exclude=' '>
      <router-view/>
    </keep-alive> 
  </div>
</template>

但是有的时候，虽然跳转回页面，页面的某些部分仍旧需要重新加载。比如切换当前城市之后返回首页，我们希望页面推荐的部分根据当前位置进行改变。如下图，并未发生关联变化。

image.png

要实现这一功能，我们需要使用动态路由。

import { mapState } from 'vuex'

export default{
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHomeInfo () {
      // 发送axios请求，请求地址在括号里
      //axios.get('http://10.207.125.34:3000/index.json)
      axios.get('http://10.207.125.34:3000/index.json?city='+ this.city)
      .then(this.handleGetHomeInfoSucc)
    },
}

但是我们虽然设置了动态路由，由于前边使用了<keep-alive>，导致更改城市之后在页面跳转回首页时直接读取的内存中内容，因此并不会发生Ajax请求。
因为用了<keep-alive>，我们多了个activated生命周期函数，借助这个函数可以实现我们想要的功能。当页面重新显示的时候，activated生命周期函数会被执行。

我们定义一个lastCity

export default{
  data(){
    return{
      lastCity:'',
    }
  },

在页面被渲染的时候，读取数据，为lastCity赋值，并发送Ajax读取数据请求。

  mounted () {
    this.lastCity=this.city
    this.getHomeInfo()
  },

在页面再次加载时，执行activated生命周期函数。
当this.city发生改变不等于this.lastCity时，重新发生Ajax请求。

  activated (){
    if (this.lastCity!==this.city){
      this.lastCity= this.city
      this.getHomeInfo()
    }
  }