vue tabBar导航栏设计实现5-最终版本

系列导航

tabBar导航栏设计5-最终版本

一、     本节目标效果

导航栏选中哪个哪个用红色图标，并且字体的颜色可以随意设置（这里为了醒目用蓝色）

二、代码结构

注：主要是标红的几个文件

三、代码

App.vue

TabBar.vue

TabBarItem.vue

MainTabBar.vue

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Category from '../views/Category.vue'
import Cart from '../views/Cart.vue'
import Profile from '../views/Profile.vue'

 

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  } ,
  {
    path: '/category',
    component: Category
  },
  {
    path: '/cart',
    component: Cart
  },
  {
    path: '/profile',
    component: Profile
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

其他一些代码不很简单看之前的博客内容

四、代码按照步骤解释

1、 抽取MainTabBar.vue组件

MainTabBar.vue组件里标签上增加了activeColor="blue"这属性，这里的颜色可以根据需求随意换。

2、 TabBarItem.vue组件里增加isActive和activeStyle计算属性用来控制，哪个按钮选中就用红色的图标和字体颜色动态设置。

this.$route.path.indexOf(this.path) !== -1  //当前路径是哪个判断，不等于-1就是找到了