基于vue-cli 路由 實現(xiàn)類似tab切換效果（vue 2.0）
1，更改main.js
2，在App.vue中，寫入兩個跳轉鏈接（router-link），分別跳轉到“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指向當前組件時自動生成的，可以在此處設置樣式（選中狀態(tài)）
4，新建Home組件，并寫入內容，About同理。
5，開始寫路由文件，新建一個router.js，如圖。
6，新建一個routes.js，如圖。（實際上，routers.js中的內容，可以直接寫在router.js中，代替routes中的內容即可。而為了結構清晰，分開寫更便于管理）
7，最終效果如圖
8，更多關于路由說明，可以查看 http://router.vuejs.org/zh-cn/essentials/getting-started.html
總結
以上所述是小編給大家介紹的基于vue-cli 路由 實現(xiàn)類似tab切換效果（vue 2.0） ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了解決vue-router路由攔截造成死循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Node.js+Vue腳手架環(huán)境搭建的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-03-03
淺談在vue中用webpack打包之后運行文件的問題以及相關配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運行文件的問題以及相關配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue3+ts出現(xiàn)白屏問題的原因與解決方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
vue2.0如何動態(tài)綁定img的src屬性(三元運算)
這篇文章主要介紹了vue2.0如何動態(tài)綁定img的src屬性(三元運算)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在Vue中解決跨域問題有多種方法,今天通過本文給大家介紹幾種比較常見的方法，對vue解決跨域問題感興趣的朋友跟隨小編一起看看吧2023-05-05
vue3 reactive函數(shù)用法實戰(zhàn)教程
reactive是Vue3中提供實現(xiàn)響應式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應式數(shù)據(jù)，當數(shù)據(jù)發(fā)生變化時UI也會自動更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在我們使用Vue開發(fā)時,經常會用到CSS,下面這篇文章主要給大家介紹了關于Css中該如何使用Vue變量的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11