總結一下vue裏一些小技巧

官方里的我就不細說了，自個擼文檔就成，下面是實踐裏經常使用的幾個小技巧或者說是遇到的坑，如有錯誤望你們指正）
一、當用a標籤設置新窗口打開頁面，設置url時，建議給href進行v-bind綁定，而後寫相對路徑便可，它默認會繼續走router-link相對路由那一套，不必在調用location的api獲取hostname，而後拼接字符串。如圖：

 

二、組件和route使用$router.params.xx耦合度過高，可嘗試使用props解耦，操做如圖：

 

三、解決實際應用場景下重定向問題：

a、能夠直接採用redirect的callbcak

 

b、使用路由守衛：可採用全局導航守衛或者組件內導航守衛，好比beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等等，可是要注意在beforeRouteEnter裏不能調用this，由於當守衛執行前，組件實例還沒被建立。也要注意beforeRouteUpdate這個鉤子，vue版本2.2+纔可使用，我的感受這是一個很是好用的鉤子，真是牛逼lity，使組件拓展性提高了不是一個檔次。以下圖是使用全局導航守衛控制用戶權限認證的小demo：

 

四、關於異步加載路由，建議單獨提出一個asyncComponent.js文件，1是爲了方便組件管理，改個path改個細節真的超級方便，2來當組件過多時會顯得router.js內容很是擁擠，也不美觀。異步引組件代碼以下:

 

五、儘可能減小dom層級，好比咱們在模板裏寫路由跳轉時，雖然說router-link默認爲咱們設置了一個a標籤，可是在實際場景可能不太實用，咱們不訪使用tag這一屬性，直接上圖：

 

六、爲了體驗，請給路由跳轉添加一些過渡效果，同操做其餘標籤同樣，給router-view套一層transtion，如圖：

 

七、切記router.push的時候不要path和params一塊兒用，params會失效，建議用query，若是非要用params，可使用組件的name。並且必定要注意取數據的時候是route，不是router，千萬不要被坑了，打印出來能夠發現route是本路由的信息，而router是全局的router信息。
八、關於keep-alive，本人建議謹慎考慮，一方面它確實特別方便緩存組件信息，可是同時若是你緩存的組件過多，也會對性能產生必定的影響，或者你某個組件的服務端代碼發生內存泄漏等狀況致使瀏覽器反應過慢或者卡死，，那麼對不起，只能從新打開一次網址了（本人親測！！爲了封裝內置瀏覽器tab頁付出了血的代價！）。。。至於具體配置，可參考同站做者：spademan
九、使用vuex存儲用戶信息時，刷新頁面會數據丟失，建議搭配localStorage。
十、後續還會有，一時半會兒也想不起來，到時候在加吧，。。