vue tabBar导航栏设计实现4-再次抽取MainTabBar

系列导航

tabBar导航栏设计4-再次抽取MainTabBar

一、     本节目标效果

上一个节的例子中App.vue中代码量还是很大如何简化App.vue,再次抽取一个MainTabBar组件负责在TabBarItem里放数据

二、代码结构

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

三、代码

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: '/',
    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组件里调用TabBar.vue和TabBarItem.vue组件，并且将数据放到MainTabBar.vue组件里。

2、TabBarItem.vue组件里增加itemClick方法负责页面跳转 ，跳转的地址由MainTabBar.vu中的tab-bar-item 组件的path属性动态传递过来。

3、 index.js中配置路由

4、App.vue中调用MainTabBar.vue组件，注意这里一定要加一个标签要不路径跳转没有占位符就不会有效果。