CSS漸變色樣式
遞歸組件
router-view是設置路由的,router-link是指定跳轉到哪個頁面的
keep-alive
keep-alive會緩存組件,?保存組件的渲染狀態。使用keep-alive包裹router-view路由,就可以緩存組件,不用每次進入組件都要重新加載一次頁面,同時會多出兩個生命周期函數activated、deactivated
activated是在組件激活狀態下觸發的函數,deactivated 是在組件停止使用下觸發的函數
keep-alive標簽還可以設置exclude屬性,屬性值是組件名,意思是讓這個組件不會緩存,每次都會重新加載頁面,適用場景例如詳情頁組件,用戶點擊不同鏈接,應該重新加載一次發送ajax請求數據。
動態路由跳轉
將router-link改為li標簽: <router-link tag="li">
swiper組件自我刷新
這兩個輪播組件的屬性,是監聽到DOM元素或者父元素變化了,就自我刷新一次。避免滾動計算寬度出錯,例如案例中的畫廊,一開始是隱藏的,點擊圖片時才顯示出來,點擊圖片后swiper需要自我刷新一下
進入頁面都是從頂部開始,在router中的index.js路由文件中,配置對應代碼
transition組件
定義過渡動畫組件
調用動畫組件,用組件名包裹住需要做過渡效果的元素