vue-cli 路由 實現類似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指向當前組件時自動生成的,可以在此處設置樣式(選中狀態)

 

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM