首先把天猫的导航贴出来，里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。
分析：
1、图标的获取
进入阿里巴巴矢量图标库，网址 http://www.iconfont.cn。
点击官方图标库，选择天猫图标库，选中放入购物车。
点击添加至项目，点击创建新项目按钮，创建tianmao项目，点击确定。
此时会有查看在线链接和下载至本地两种方式，我选择第一种，因为后期如果要添加小图标的话，只需要重新生成在线链接，然后更新link即可
引入图标，使用区别在第三个class来引入对应图标
此时所需图标处理完毕
2、创建精选、品牌、会员、购物车、我及路由导航组件Home.vue、Brand.vue、Member.vue、Cart.vue、Me.vue、Tabs.vue
使用的样式时less，如果在.vue文件中写样式，style必须写成 @H_403_45@
我使用的是命名路由，这样我们就可以当路由组件变化时，直接修改router/index.js文件即可。
3、创建路由
router/index.js
4、App.vue引入组件Tabs.vue，并添加view
>渲染路径匹配到的视图组件
5、导航状态样式
router-link-exact-active：配置当链接被精确匹配的时候应该激活的CSS类名。
router-link-active：设置链接激活时使用的 CSS 类名。
如果要修改CSS样式命名，可通过
点击品牌时展示如下：Home的Tab仍然设置了routet-link-activeCSS类名，如果设置routet-link-active样式颜色为红色，精选就会一直保持红色
此时需要使用”精确匹配模式“，
访问 http://localhost:8080/#/brand就不会匹配到http://localhost:8080/#/
总结
以上所述是小编给大家介绍的vue router仿天猫底部导航栏功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
