vue router怎么模仿天猫底部导航栏功能

1355913552 • 07/17 11:06 • Linux技术 • 141 views

这篇文章主要介绍“vue router怎么模仿天猫底部导航栏功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue router怎么模仿天猫底部导航栏功能”文章能帮助大家解决问题。首先把天猫的导航贴出来，里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。分析：1、图标的获取进入阿里巴巴矢量图标库，网址 http://www.iconfont.cn。点击官方图标库，选择天猫图标库，选中放入购物车。点击添加至项目，点击创建新项目按钮，创建tianmao项目，点击确定。
此时会有查看在线链接和下载至本地两种方式，我选择第一种，因为后期如果要添加小图标的话，只需要重新生成在线链接，然后更新link即可复制链接到index.html的link标签内，具体为引入图标，使用区别在第三个class来引入对应图标此时所需图香港云主机标处理完毕2、创建精选、品牌、会员、购物车、我及路由导航组件Home.vue、Brand.vue、Member.vue、Cart.vue、Me.vue、Tabs.vue使用的样式时less，如果在.vue文件中写样式，style必须写成

，否则会报错Tabs.vue我使用的是命名路由，这样我们就可以当路由组件变化时，直接修改router/index.js文件即可。3、创建路由router/index.js4、App.vue引入组件Tabs.vue，并添加view>渲染路径匹配到的视图组件
5、导航状态样式
对应的路由匹配成功后，就会自动设置class属性值为router-link-exact-active router-link-activerouter-link-exact-active：配置当链接被精确匹配的时候应该激活的CSS类名。
router-link-active：设置链接激活时使用的 CSS 类名。
如果要修改CSS样式命名，可通过属性exact-active-class和active-class分别设置，也可通过路由构造函数选项linkExactActiveClass和linkActiveClass来设置点击品牌时展示如下：Home的Tab仍然设置了routet-link-activeCSS类名，如果设置routet-link-active样式颜色为红色，精选就会一直保持红色此时需要使用”精确匹配模式“，则使用exact，此时的Home的Tab就不会被设置routet-link-activeCSS类名了访问 http://localhost:8080/#/brand就不会匹配到http://localhost:8080/#/关于“vue router怎么模仿天猫底部导航栏功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注开发云行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: Java GUI可视化实例分析

本篇内容介绍了“ Java GUI可视化实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！问题：房间里有 100 个人，每人都有 100 元钱，他们在玩一个…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。