首先把天猫的导航贴出来，里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。

分析：

1、图标的获取

进入阿里巴巴矢量图标库，网址 http://ponents: {Tabs} } </script> <style> *{ padding:0; margin:0; } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style>

5、导航状态样式

<router-link>对应的路由匹配成功后，就会自动设置class属性值为router-link-exact-active router-link-active

router-link-exact-active：配置当链接被精确匹配的时候应该激活的CSS类名。

router-link-active：设置链接激活时使用的 CSS 类名。

如果要修改CSS样式命名，可通过<router-link>属性exact-active-class和active-class分别设置，也可通过路由构造函数选项linkExactActiveClass和linkActiveClass来设置

点击品牌时展示如下：Home的Tab仍然设置了routet-link-activeCSS类名，如果设置routet-link-active样式颜色为红色，精选就会一直保持红色

此时需要使用”精确匹配模式“，<router-link :to="{name:'Home'}" tag="li" exact> 则使用exact，此时的Home的Tab就不会被设置routet-link-activeCSS类名了

访问 http://localhost:8080/#/brand就不会匹配到http://localhost:8080/#/

总结

以上所述是小编给大家介绍的vue router仿天猫底部导航栏功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！