使用keep-alive优化网页性能

1. 创建项目分支city-keepalive并拉到线下：

• Bug:
  每次我们点击切换首页和城市列表页面即路由被切换的时候，都会触发一次ajax请求，原因是每次路由切换到首页这个组件的时候，页面都会被重新的渲染，然后渲染完成之后就会执行mounted这个钩子，这个ajax的数据就会被重新获取。事实上我们希望获取一次就可以了，不然性能上很低。
  
• 解决：
  打开main.js，城市的入口组件是app.vue，打开app.vue，router-view显示的是路由所对应的内容，将其包裹在keep-alive标签中，keep-alive是vue自带的标签，表示的是我的路由的内容被加载过一次之后，我就将路由中的内容放在内存之中，下一次再进“这个”路由的时候，不需要再重新渲染这个组件，重新执行组件中的钩子函数，只需要将内存中的内容拿出来显示在页面上就可以了。<keep-alive>是Vue的内置组件&#x