当我们来回切换两个页面的时候，可以看到ajax请求也在重复请求，每一次路由发生切换时，ajax都在重新发送。
因为每一次路由重新切换到某个组件时，这个组件都会被重新渲染，所以它的mounted这个钩子就会被重新执行，所以ajax就会被重新获取。
组件ajax部分代码
获取一次不行吗？每一次进来都要重新获取，性能很低。
先打开
App.vue
image.png
router-view显示的是路由所对应的内容，在它的外层套上一个keep-alive这是Vue自带的标签，它的意思是，路由的内容被加载过一次之后，就将它放入内存之中，下一次再进入这个路由，不需要重新渲染这个组件，不需要重新执行钩子函数，只需要从内存中拿出来就行了。
这个时候再去浏览器来回切换页面，发现没有重复进行ajax请求了。
但是又出现了一个新的问题。
如果我们切换城市，但是回到首页也不会重新请求了，那页面显示的内容和城市就无法对应了，本来的需求是，切换到北京，展现的是北京的产品，切换到深圳，展现的是深圳的产品。现在都不会重新加载ajax请求了，等于产品内容也不会改变了。
所以，在城市发生改变的时候，首页其实需要重新加载一次ajax。
还是那个组件：
引入mapState
引入
mapState
获取计算属性获取到对应的城市内容city
获取到对应的城市内容
city
请求带上参数
然后在发
ajax请求的时候，带上参数
定义lastCity
带上参数了
还没完。
当时用keep-alive时，组件会多出一个生命周期函数，叫做activated 在keep-alive 组件激活时调用。
当我们进入一个新的页面时，mounted和activated都会被执行，切换出去，重新进来的时候mounted没有再执行了，activated会再执行，因为用的keep-alive的缘故，直接拿的内存中的缓存，没有重新渲染dom了。借助这个生命周期函数，可以实现想要的功能。
定义一个lastCity用来存放上一次的城市。
mounted
当页面刚进来被加载时，将当前
city赋值给lastCity（第一次进来时）
activated
在
keep-alive组件重新激活的时候，也就是切换回当前组件时。执行了activated这个钩子函数，在这个钩子函数中，做个判断，判断当前的城市和lastCity中的城市是否一样，如果一样不做任何操作，不一样的话，将当前城市赋值给lastCity（更新操作）,然后执行一次ajax请求(this.getHomeInfo())
网友评论