vue專案學習：18-使用keepalive優化網頁

阿新 • • 發佈：2019-02-04

在整個頁面裡，有個問題效能是不好的，那就是每當路由發生變化的時候，ajax都會被重新請求。

有沒有辦法可以解決呢?當然有：

但是這樣會有一個問題：

就是當我的城市列表頁點選城市發生改變的時候，因為路由的頁面從記憶體中獲取，不在載入ajax，那麼是有問題的。vue中如何解決這問題呢？

其實在keepalive包裹的時候，vue在例項中新增了一個鉤子，就是actived。當頁面重新被顯示的時候，activted會被執行。

在整個頁面裡，有個問題效能是不好的，那就是每當路由發生變化的時候，ajax都會被重新請求。有沒有辦法可以解決呢?當然有：但是這樣會有一個問題：就是當我的城市列表頁點選城市發生改變的時候，因為路由的頁面從記憶體中獲取，不在載入ajax，那麼是有問題的。vue中如何解決這問題呢？

首先：npm install axios --save然後在home.vue中傳送ajax請求，因為在homevue中只需要傳送一次請求，就可以獲取到資料分發個各子元件。下面是轉發請求的介面值得注意的是，當你的配置檔案發生改變的時候，一定要重啟伺服器。才可以生效，這裡我掉了坑

終於寫到vuex了，之前看過一些vuex的教程。但是總感覺太複雜，這次自己嘗試把它寫出來。官網地址：https://vuex.vuejs.org/zh-cn/什麼是vuex：官方解釋-Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所

一、生命週期 1、1.0的生命週期: 週期解釋 init 元件剛剛被建立，但Data、method等屬性還沒被計算出來 created 元件建立已經完成，但DOM還沒被生成出來 beforeCompile

js自學網站推薦：http://www.51zxw.net/study.asp?vip=4857021<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

Alphabet：字母表導航條 (增量式) 元件data初始化： name: 'CityAlphabet', props: { cities: Object }, data() { return { touchStatus: fal

Search：城市選擇資訊輸入檢索 (增量式) 功能點2：使用者可以在搜尋欄中可輸入資訊進行城市資訊的檢索，檢索結果以列表形式展現，選定城市後會進行首頁的路由跳轉。功能點2分析：使用者故事角度作為使用者，我想在搜尋欄中輸入資訊後會有結果資訊

Header：城市資訊選擇標題展示在此元件中，主要做了向Home元件的頁面路由跳轉 <template>：需要注意的是被<router-link>包裹的標籤會使原標籤樣式無效，類似<a>。解決方案上篇文章已經給出：https://blog

2.城市列表頁開發功能點概述頁面路由跳轉(Home -> City): 點選首頁城市選擇按鈕，即可跳轉至城市列表頁。使用者可以在搜尋欄中可輸入資訊進行城市資訊的檢索，檢索結果以列表形式展現，選定城市後會進行首頁的路由跳轉。

icons <template> <script> 採用vue-devtools瀏覽器工具外掛檢視此部分計算屬性詳情： Recommend <template> <script&

Home：首頁根元件，用於管理子元件以及資料請求 <template>：子元件管理引入所有子元件，並進行屬性繫結(父元件向子元件傳遞資料的方式) <template> <div>

專案實戰 1. 首頁開發環境搭建開發環境：node.js、Vue-cli腳手架工具開發IDE：VScode 版本控制工具：Git 檢查環境搭建結果：關於Vue-cli： Vue提供的官方命令列工具，可用於快速搭建大型單頁應用。該工具為現代化的前端開發工作流提供

3. 景點詳情頁開發功能點概述使用者首頁點選熱銷推薦景點，即可跳轉景點詳情頁面。詳情頁面包括三部分內容：頂部圖片展示、景點門票詳情、隱藏頁面頭。(拖動至下方會出現) 使用者點選頂部圖片展示，進入圖片輪播區域(全屏)，可左右滑動進行圖片瀏覽

一_原有元件效果其中,核取方塊為一個元件,根據資料庫中的值,進行是否勾選,並且核取方塊只能是禁用的二_原有元件程式碼 <template> <input v-if="gearboxtype === 'A'" checked type="

前言：以下內容均為學習慕課網高階實戰課程的實踐爬坑筆記。上一篇總結了專案概述、專案準備、頁面骨架搭建。這一篇重點梳理推薦頁面開發。專案github地址：https://github.com/66Web/ljq_vue_music，歡迎Star。一、頁面簡介+

前言：以下內容均為學習慕課網高階實戰課程的實踐爬坑筆記。專案github地址：https://github.com/66Web/ljq_vue_music，歡迎Star。一、歌手頁面佈局與設計需求：聯絡人列表形式、左右聯動的滾動列

前言：以下內容均為學習慕課網高階實戰課程的實踐爬坑筆記。專案github地址：https://github.com/66Web/ljq_vue_music，歡迎Star。一、子路由配置以及轉場動畫實現 components->

前言：以下內容均為學習慕課網高階實戰課程的實踐爬坑筆記。專案github地址：https://github.com/66Web/ljq_vue_music，歡迎Star。一、歌單詳情頁開發 &nb

在第一篇的時候確實可以建立，這次跟著視訊搭建一次，比較一下和上次的區別，更正一下上次的錯誤操作，加深理解。重新搭建Vue-CLI腳手架在Node.js的安裝目錄下，刪除node_cache/和node_global下的所有內容，即讓Node處於剛剛安裝完成的狀態，連cnpm也

今天早上來到公司，沒事看了一下別人的部落格，然後試了一下，發現的確是可以的，在此記錄一下，方便自己日後查閱。首先新建一個資料夾：commonFunction ,然後在裡面建立一個檔案common.js 建立好之後，在main.js裡面引入這個公共方法