1. 程式人生 > >總結一下vue裡一些小技巧

總結一下vue裡一些小技巧

官方里的我就不細說了,自個擼文件就成,下面是實踐裡常用的幾個小技巧或者說是遇到的坑,若有錯誤望大家指正)
1、當用a標籤設定新視窗開啟頁面,設定url時,建議給href進行v-bind繫結,然後寫相對路徑即可,它預設會繼續走router-link相對路由那一套,沒必要在呼叫location的api獲取hostname,然後拼接字串。如圖:

 

2、元件和route使用$router.params.xx耦合度太高,可嘗試使用props解耦,操作如圖:

 

3、解決實際應用場景下重定向問題:

a、可以直接採用redirect的callbcak

 

b、使用路由守衛:可採用全域性導航守衛或者元件內導航守衛

,比如beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等等,但是要注意在beforeRouteEnter裡不能呼叫this,因為當守衛執行前,元件例項還沒被建立。也要注意beforeRouteUpdate這個鉤子,vue版本2.2+才可以使用,個人感覺這是一個非常好用的鉤子,真是牛逼lity,使元件拓展性提升了不是一個檔次。如下圖是使用全域性導航守衛控制使用者許可權認證的小demo:

 

4、關於非同步載入路由,建議單獨提出一個asyncComponent.js檔案,1是為了方便元件管理,改個path改個細節真的超級方便,2來當元件過多時會顯得router.js內容非常擁擠,也不美觀。非同步引元件程式碼如下:

 

5、儘量減少dom層級,比如我們在模板裡寫路由跳轉時,雖說router-link預設為我們設定了一個a標籤,但是在實際場景可能不太實用,我們不訪使用tag這一屬性,直接上圖:

 

6、為了體驗,請給路由跳轉新增一些過渡效果,同操作其他標籤一樣,給router-view套一層transtion,如圖:

 

7、切記router.push的時候不要path和params一起用,params會失效,建議用query,如果非要用params,可以使用元件的name。而且一定要注意取資料的時候是route,不是router,千萬不要被坑了,打印出來可以發現route是本路由的資訊,而router是全域性的router資訊。
8、關於keep-alive,本人建議謹慎考慮

,一方面它確實特別方便快取元件資訊,但是同時如果你快取的元件過多,也會對效能產生一定的影響,或者你某個元件的服務端程式碼發生記憶體洩漏等情況導致瀏覽器反應過慢或者卡死,,那麼對不起,只能重新開啟一次網址了(本人親測!!為了封裝內建瀏覽器tab頁付出了血的代價!)。。。至於具體配置,可參考同站作者:spademan
9、使用vuex儲存使用者資訊時,重新整理頁面會資料丟失,建議搭配localStorage。
10、後續還會有,一時半會兒也想不起來,到時候在加吧,。。