在路由切換（頁面跳轉(zhuǎn)時），每一次都發(fā)送了Ajax請求。因為每次頁面跳轉(zhuǎn)組件都會被重新渲染，mounted鉤子都會被執(zhí)行，Ajax數(shù)據(jù)每次都要去獲取，這樣導(dǎo)致效率低。

在程序的入口組件App.vue中，<router-view>顯示的是路由所對應(yīng)的內(nèi)容。

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

我們可以為它包裹一個<keep-alive>標(biāo)簽。這是view自帶的標(biāo)簽。使路由被加載過之后，將組件放在內(nèi)存中，下次再跳轉(zhuǎn)回頁面時，直接從內(nèi)存中取數(shù)據(jù)，不再發(fā)送Ajax請求。

<template>
  <div id="app">
    <!-- keep-alive讓路由的內(nèi)容在被加載過之后防止內(nèi)存中，下次訪問不需要重新加載渲染，不再動鉤子 -->
    <!-- 想要不緩存某個組件就寫在exclude里,和activated作用一樣 -->
    <keep-alive exclude=' '>
      <router-view/>
    </keep-alive> 
  </div>
</template>

但是有的時候，雖然跳轉(zhuǎn)回頁面，頁面的某些部分仍舊需要重新加載。比如切換當(dāng)前城市之后返回首頁，我們希望頁面推薦的部分根據(jù)當(dāng)前位置進行改變。如下圖，并未發(fā)生關(guān)聯(lián)變化。

image.png

要實現(xiàn)這一功能，我們需要使用動態(tài)路由。

import { mapState } from 'vuex'

export default{
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHomeInfo () {
      // 發(fā)送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)
    },
}

但是我們雖然設(shè)置了動態(tài)路由，由于前邊使用了<keep-alive>，導(dǎo)致更改城市之后在頁面跳轉(zhuǎn)回首頁時直接讀取的內(nèi)存中內(nèi)容，因此并不會發(fā)生Ajax請求。
因為用了<keep-alive>，我們多了個activated生命周期函數(shù)，借助這個函數(shù)可以實現(xiàn)我們想要的功能。當(dāng)頁面重新顯示的時候，activated生命周期函數(shù)會被執(zhí)行。

我們定義一個lastCity

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

在頁面被渲染的時候，讀取數(shù)據(jù)，為lastCity賦值，并發(fā)送Ajax讀取數(shù)據(jù)請求。

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

在頁面再次加載時，執(zhí)行activated生命周期函數(shù)。
當(dāng)this.city發(fā)生改變不等于this.lastCity時，重新發(fā)生Ajax請求。

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