當我們來回切換兩個頁面的時候从铲，可以看到ajax請求也在重復請求酵颁，每一次路由發(fā)生切換時，ajax都在重新發(fā)送登颓。
因為每一次路由重新切換到某個組件時搅荞，這個組件都會被重新渲染，所以它的mounted這個鉤子就會被重新執(zhí)行框咙，所以ajax就會被重新獲取咕痛。
組件ajax部分代碼
獲取一次不行嗎？每一次進來都要重新獲取喇嘱，性能很低茉贡。
先打開
App.vue
image.png
router-view顯示的是路由所對應的內(nèi)容，在它的外層套上一個keep-alive這是Vue自帶的標簽者铜，它的意思是腔丧，路由的內(nèi)容被加載過一次之后，就將它放入內(nèi)存之中作烟，下一次再進入這個路由愉粤，不需要重新渲染這個組件，不需要重新執(zhí)行鉤子函數(shù)拿撩，只需要從內(nèi)存中拿出來就行了衣厘。
這個時候再去瀏覽器來回切換頁面，發(fā)現(xiàn)沒有重復進行ajax請求了。
但是又出現(xiàn)了一個新的問題影暴。
如果我們切換城市错邦，但是回到首頁也不會重新請求了，那頁面顯示的內(nèi)容和城市就無法對應了型宙，本來的需求是撬呢，切換到北京，展現(xiàn)的是北京的產(chǎn)品早歇，切換到深圳倾芝，展現(xiàn)的是深圳的產(chǎn)品。現(xiàn)在都不會重新加載ajax請求了箭跳，等于產(chǎn)品內(nèi)容也不會改變了晨另。
所以，在城市發(fā)生改變的時候谱姓，首頁其實需要重新加載一次ajax借尿。
還是那個組件：
引入mapState
引入
mapState
獲取計算屬性獲取到對應的城市內(nèi)容city
獲取到對應的城市內(nèi)容
city
請求帶上參數(shù)
然后在發(fā)
ajax請求的時候，帶上參數(shù)
定義lastCity
帶上參數(shù)了
還沒完屉来。
當時用keep-alive時路翻，組件會多出一個生命周期函數(shù)，叫做activated 在keep-alive 組件激活時調(diào)用茄靠。
當我們進入一個新的頁面時茂契，mounted和activated都會被執(zhí)行，切換出去慨绳，重新進來的時候mounted沒有再執(zhí)行了掉冶，activated會再執(zhí)行，因為用的keep-alive的緣故脐雪，直接拿的內(nèi)存中的緩存厌小，沒有重新渲染dom了。借助這個生命周期函數(shù)战秋，可以實現(xiàn)想要的功能璧亚。
定義一個lastCity用來存放上一次的城市。
mounted
當頁面剛進來被加載時脂信，將當前
city賦值給lastCity（第一次進來時）
activated
在
keep-alive組件重新激活的時候癣蟋，也就是切換回當前組件時。執(zhí)行了activated這個鉤子函數(shù)狰闪，在這個鉤子函數(shù)中梢薪，做個判斷，判斷當前的城市和lastCity中的城市是否一樣尝哆，如果一樣不做任何操作，不一樣的話甜攀，將當前城市賦值給lastCity（更新操作）,然后執(zhí)行一次ajax請求(this.getHomeInfo())
