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.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，并添加渲染路径匹配到的视图组件

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/#/

相关推荐;

jQuery实现的粘性滚动导航栏效果

jQuery实现导航栏头部菜单项点击后变换颜色的方法实例详解

JavaScript实现个性导航栏特效