vue router仿天貓底部導覽列實例分享

本文主要介紹了vue router仿天貓底部導覽列功能,需要的朋友可以參考下，希望能幫助大家。

先把天貓的導航貼出來，裡面有精選、品牌、會員、購物車、我五個導航及對應的圖示。

分析：

1、圖示的取得

進入阿里巴巴向量圖示庫，網址  http://www.iconfont. cn。

點選官方圖示庫，選擇天貓圖示庫，選取放入購物車。

點選新增至項目，點選建立新項目按鈕，建立tianmao項目，點選確定。

此時會有查看線上連結和下載至本機兩種方式，我選擇第一種，因為後期如果要新增小圖示的話，只需要重新生成在線鏈接，然後更新link即可

#複製鏈接到index.html的link標籤內，具體為

<link rel="stylesheet" href="http://at.alicdn.com/t/font_443540_nvmeyfe7k3rcc8fr.css" rel="external nofollow" >

引入圖標，使用區別在第三個class來引入對應圖標

此時所需圖示處理完畢

2、建立精選、品牌、會員、購物車、我及路由導航元件Home.vue、Brand.vue、Member.vue、Cart.vue、Me .vue、Tabs.vue

使用的樣式時less，如果在.vue檔案中寫樣式，style必須寫成