溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹基于vue-cli路由怎么實現(xiàn)類似tab切換效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1，更改main.js
2，在App.vue中，寫入兩個跳轉(zhuǎn)鏈接（router-link），分別跳轉(zhuǎn)到“home”“About” （home、About即分別是兩個組件）
----其中，為什么要使用<router-link></router-link>, 請移步：http://router.vuejs.org/zh-cn/api/router-link.html
----router-view路由視圖（必須）
----css可以使用外部樣式
3，app.vue的樣式如圖。
----.router-link-active這個class，是當路由path指向當前組件時自動生成的，可以在此處設(shè)置樣式（選中狀態(tài)）
4，新建Home組件，并寫入內(nèi)容，About同理。
5，開始寫路由文件，新建一個router.js，如圖。
6，新建一個routes.js，如圖。（實際上，routers.js中的內(nèi)容，可以直接寫在router.js中，代替routes中的內(nèi)容即可。而為了結(jié)構(gòu)清晰，分開寫更便于管理）
7，最終效果如圖
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。
以上是“基于vue-cli路由怎么實現(xiàn)類似tab切換效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
