在路由切换（页面跳转时），每一次都发送了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()
}
}
