Vue項目詳情頁:keep-alive與路由的關系、activated生命周期函數、遞歸組件、css漸變色、動態路由跳轉、keep-alive、每次進入頁面默認從頂部開始、transition組...

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組件

定義過渡動畫組件

調用動畫組件,用組件名包裹住需要做過渡效果的元素

vue4.0文件遷移

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。