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

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

分析:

1、图标的获取

进入阿里巴巴矢量图标库,网址 http://www.iconfont.cn

点击官方图标库,选择天猫图标库,选中放入购物车。

点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定。

此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可

复制链接到index.html的link标签内,具体为

rush:js;">

引入图标,使用区别在第三个class来引入对应图标

此时所需图标处理完毕

2、创建精选、品牌、会员、购物车、我及路由导航组件Home.vue、Brand.vue、Member.vue、Cart.vue、Me.vue、Tabs.vue

使用的样式时less,如果在.vue文件中写样式,style必须写成

我使用的是命名路由,这样我们就可以当路由组件变化时,直接修改router/index.js文件即可。

3、创建路由

router/index.js

rush:js;"> import Vue from 'vue' import Router from 'vue-router' import Home from '@/Home' import Brand from '@/Brand' import Member from '@/Member' import Cart from '@/Cart' import Me from '@/Me' Vue.use(Router) export default new Router({ //mode: 'history',//base: __dirname,//linkActiveClass: 'active',// 更改激活状态的Class值 routes: [ { path: '/',name: 'Home',component: Home },{ path: '/brand',name: 'Brand',component: Brand },{ path: '/member',name: 'Member',component: Member },{ path: '/cart',name: 'Cart',component: Cart },{ path: '/me',name: 'Me',component: Me } ] })

4、App.vue引入组件Tabs.vue,并添加view

>渲染路径匹配到的视图组件

rush:js;">

5、导航状态样式

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

router-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仿天猫底部导航栏功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...