Vue封装一个Tabbar组件带组件路由跳转方式-前端开发

下面就来详细讲解如何用Vue封装一个Tabbar组件并带有组件路由的跳转方式。

下面就来详细讲解如何用Vue封装一个Tabbar组件并带有组件路由的跳转方式。

一、准备工作

在开始编写代码之前，需要先安装Vue以及Vue Router等组件。具体步骤如下：

安装Vue.js

npm install vue -S

安装Vue Router

npm install vue-router -S

二、编写Tabbar组件

下面我们开始编写Tabbar组件，首先在src/components文件夹下创建一个Tabbar.vue文件。

<template>
  <div>
    <router-view></router-view>
    <div class="tab-bar">
      <div class="tab-item" v-for="(item, index) in tabItems" :key="index" :class="{active: activeIndex === index}" @click="goto(index)">
        <img :src="item.icon" alt="">
        <div>{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data() {
    return {
      activeIndex: 0,
      tabItems: [
        {
          title: '首页',
          icon: require('@/assets/images/tabBar/home.png'),
          path: '/'
        },
        {
          title: '商品',
          icon: require('@/assets/images/tabBar/shop.png'),
          path: '/shop'
        },
        {
          title: '购物车',
          icon: require('@/assets/images/tabBar/cart.png'),
          path: '/cart'
        },
        {
          title: '我的',
          icon: require('@/assets/images/tabBar/mine.png'),
          path: '/mine'
        }
      ]
    }
  },
  methods: {
    goto(index) {
      if (index !== this.activeIndex) {
        this.activeIndex = index
        this.$router.push(this.tabItems[index].path)
      }
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  z-index: 999;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}
.tab-item.active {
  color: #00bcd4;
}
.tab-item img {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}
</style>

在Tabbar.vue文件中，我们定义了一个包含路由视图和底部Tabbar的组件。底部Tabbar显示了四个Tab选项卡，每个Tab选项卡包含一个标题、一个图标和一个路径。点击Tab选项卡时，我们将更新活动选项卡的索引，并使用Vue Router将浏览器URL更新为相应的路径。

此外，还定义了一些CSS样式，使其在浏览器中显示为底部功能区。

三、配置Vue Router

在我们可以使用Vue Router导航到不同的路由之前，我们需要先配置Vue Router。打开src/router/index.js文件，在里面配置Vue Router路由。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/shop',
      name: 'Shop',
      component: () => import('@/views/Shop.vue')
    },
    {
      path: '/cart',
      name: 'Cart',
      component: () => import('@/views/Cart.vue')
    },
    {
      path: '/mine',
      name: 'Mine',
      component: () => import('@/views/Mine.vue')
    }
  ]
})

router.beforeEach((to, from, next) => {
  next()
})

export default router

在设置Vue Router时，我们定义了四个路由：Home、Shop、Cart和Mine。

四、组合Tabbar和Vue Router

现在我们已经将Vue Router配置为支持不同的路由，现在我们需要将Tabbar组件与Vue Router结合起来，以实现底部Tabbar的导航。打开App.vue文件并将Tabbar组件添加到里面。

<template>
  <div id="app">
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'

export default {
  name: 'App',
  components: {
    Tabbar
  }
}
</script>

现在我们已经将Tabbar组件添加到应用程序中，Vue Router将根据当前URL路径的不同来显示相应的组件。

现在，我们可以通过点击底部Tabbar中的选项卡来访问应用程序中的不同页面了。

五、示例展示

下面是一个简单的示例，演示了如何使用Vue封装一个Tabbar组件带组件路由跳转功能的实现。

<template>
  <div id="app">
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'

export default {
  name: 'App',
  components: {
    Tabbar
  }
}
</script>

<template>
  <div>
    <router-view></router-view>
    <div class="tab-bar">
      <div class="tab-item" v-for="(item, index) in tabItems" :key="index" :class="{active: activeIndex === index}" @click="goto(index)">
        <img :src="item.icon" alt="">
        <div>{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data() {
    return {
      activeIndex: 0,
      tabItems: [
        {
          title: '首页',
          icon: require('@/assets/images/tabBar/home.png'),
          path: '/'
        },
        {
          title: '商品',
          icon: require('@/assets/images/tabBar/shop.png'),
          path: '/shop'
        },
        {
          title: '购物车',
          icon: require('@/assets/images/tabBar/cart.png'),
          path: '/cart'
        },
        {
          title: '我的',
          icon: require('@/assets/images/tabBar/mine.png'),
          path: '/mine'
        }
      ]
    }
  },
  methods: {
    goto(index) {
      if (index !== this.activeIndex) {
        this.activeIndex = index
        this.$router.push(this.tabItems[index].path)
      }
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  z-index: 999;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}
.tab-item.active {
  color: #00bcd4;
}
.tab-item img {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/shop',
      name: 'Shop',
      component: () => import('@/views/Shop.vue')
    },
    {
      path: '/cart',
      name: 'Cart',
      component: () => import('@/views/Cart.vue')
    },
    {
      path: '/mine',
      name: 'Mine',
      component: () => import('@/views/Mine.vue')
    }
  ]
})

router.beforeEach((to, from, next) => {
  next()
})

export default router

在示例代码中，我们封装了一个Tabbar组件，并向它传递了四个路由路径：/、/shop、/cart和/mine。当用户点击这些标签之一时，Vue Router会根据URL路径加载相应的组件。