页面重新加载和重新显示优化

页面重新加载的优化

页面重新加载时，会重新去获取ajax数据，这样如果我多次请求同一个页面就要请求多次ajaxa数据，这样性能就大幅度降低，我们可以采用vue自带的一个属性keep-active,在总vue组件中我们这样做

<template>
  <div id="app">
  <keep-alive>
    <router-view/>
  </keep-alive>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

页面重新显示的优化

加上keep-active后，当你加载页面时页面的ajax数据会保存下来当下次再加载这个页面时就不会再去获取ajax数据了。
这时候我们会遇到一个问题，比如q去哪儿app上的定位系统，当我们选择不同的城市时首页都会重新显示，这时候后我们就不能再去调用默认的页面数据了，那咋办呢，怎么去修改呢？
我们可以给每个页面加上城市名，使每个城市都对应自己的ajax数据，当着次点击的城市和上次一样时就不去获取ajax数据，否则就可以去获取。
这里有个重要的知识要注意下：当加上keep-active后系统会帮我们多加上一个生命周期钩子activated,这个钩子在页面重新显示（不是加载）是会被触发，这个要和mounted钩子区分开来，有了这个钩子我们就可以在每次页面显示是进行判断，如果城市名相同则不调用ajax否则如此。