現在的專案,用的是vue,但當時用的時候,是邊學邊做的,上手確實比較簡單,但是已經用vue寫了乙個專案了,但是感覺對vue的還是不是很深刻,用的都是比較簡單的api,
現在回頭看看,有些東西,非常的精巧和實用,現在回顧一下:
1.index
迴圈顯示內容的時候,當需要顯示index值的時候,index需要再item後面,如果index在item前面會顯示item物件2.params() 動態路由匹配
我們經常需要把某種模式匹配到的所有路由,全部對映到同個元件,例如我們有乙個second元件,對於所有id各不相同的使用者,都要使用這個元件來渲染。
router.js配置
vue頁面foo在頁面上顯示的內容barsecond }
/second/foo
和/second/bar
都將對映到相同的路由second上,不用寫新的vue元件。
3.命名式導航
在官網上介紹了一種命名路由,因為我一直是使用直接push()路徑的,最近也在研究它倆的區別,
用下來,個人還是比較喜歡直接push()路徑的例一級路由裡面有first和second路由
first然後first路由裡面又有detail和test路由second
detail在路由配置裡test
routes: [,,在測試過程中,首次進入,是可以直接重定向至first/detail路由的,但是當我點選second路由,再次點選first按鈕時,就無法重定向至detail,只能手動點選,]},,]
重定向會失效,所以在使用命名導航時,盡量不要不要涉及父子路由巢狀的關係,最好是導航至某個特定頁面。所以不建議大範圍使用命名式導航
4.直接路徑導航
在使用path導航的時候,也遇到一些問題
例如,是這樣配置路由的,,,]在使用repair路由時,有時需要傳一些引數,},
因為是從屬關係,當觸發repair元件的時候,sec元件應該預設處於active狀態,但是當query攜帶引數的時候,頁面可以正常顯示,
在此時的sec元件卻不在active狀態,究其原因,就是因為repair
攜帶了引數,與配置的路由不匹配,所以無法找到父級路由,所以用下來感覺都不是那麼完美,也許自己理解的有誤,但是目前目前遇到的情況確實是這樣。
vue router 導航鉤子
vue router 提供的導航鉤子主要用來攔截導航,讓它完成跳轉或取消。router.beforeeach 註冊乙個全域性的 before 鉤子 const router new vuerouter router.beforeeach to,from,next 每個鉤子方法接收三個引數 2.aft...
vue router 導航守衛
考慮一下這個需求 當頁面發生跳轉時,自動更改頁面的標題。比如跳轉到home頁面,標題改為首頁,跳轉到about頁面,標題改為關於。首先,可以通過生命週期函式實現這個需求,但使用生命週期函式的話,需要在每乙個元件中都新增實現 如果元件過多的話,這將不是乙個好的選擇。這時,就可以考慮使用導航守衛的功能。...
vue router 導航守衛
記住引數或查詢的改變並不會觸發進入 離開的導航守衛。你可以通過觀察 route物件來應對這些變化,或使用beforerouteupdate的元件內守衛。const router new vuerouter router.beforeeach to,from,next next next false ...