1. Python技术站首页
  2. 其他
  3. JavaScript

Vue封装一个Tabbar组件 带组件路由跳转方式

• JavaScript
yizhihongxing

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

一、准备工作

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

  1. 安装Vue.js
npm install vue -S
  1. 安装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路径加载相应的组件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue封装一个Tabbar组件 带组件路由跳转方式 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript Math对象使用方法

    JavaScript中的Math对象是一个内置的对象，提供了许多数学计算方法和常数。Math对象中的所有方法和常数都是静态的，意味着你不需要创建一个Math对象就可以使用这些方法和常数。下面是Math对象中一些常用的方法和常数以及示例代码。 1. Math.PI Math.PI表示圆周率，它是一个不变的数值，约等于3.141592653589793。你可以通…

    Web开发基础 2023年3月30日
    00

  • JS数组求和的常用方法总结【5种方法】

    下面是JS数组求和的常用方法总结【5种方法】的详细攻略： 1. 普通循环求和 利用循环遍历数组中的每一个元素，并累加求和。具体代码如下： function sum(arr) { let result = 0; for (let i = 0; i < arr.length; i++) { result += arr[i]; } return result…

    JavaScript 2023年5月27日
    00

  • Javascript Math min() 方法

    JavaScript中的Math.min()方法是用于返回一组数中的最小值的函数。以下是关于Math.min()方法的完整攻略，包含两个示例。 JavaScript Math对象的min()方法 JavaScript Math的min()方法用于返回一数中的最小。下面是min()方法的语法： Math.min([value1[,2 …]]]) 其中，va…

    JavaScript 2023年5月11日
    00

  • JavaScript实现删除,移动和复制文件的方法

    下面就是“JavaScript实现删除、移动和复制文件的方法”的完整攻略。 删除文件 使用 XMLHttpRequest 对象和 AJAX 可以先准备一个简单的页面，其中有一个表单用来选择要删除的文件或文件夹，还有一个删除按钮用来触发删除操作。然后在需要执行删除的那个按钮上添加一个点击事件，将所选中的文件或文件夹通过 AJAX 上传到服务器端进行删除。代码如…

    JavaScript 2023年5月27日
    00

  • 使用Angular缓存父页面数据的方法

    使用Angular缓存父页面数据是提高应用性能的一种有效方式。下面将介绍如何使用Angular提供的服务和技术来实现此目的。 缓存父页面数据的方法 使用Angular 的服务 使用@Input 和@Output 装饰器 在组件之间可以使用@Input 和@Output 装饰器来传递数据，父组件可以通过将数据绑定到@Input 装饰器上来将数据传递给子组件。这…

    JavaScript 2023年6月11日
    00

  • JS脚本实现定时到网站上签到/签退功能

    实现JS脚本实现定时到网站上签到/签退功能，可以通过以下步骤来实现： 使用Chrome浏览器打开需要签到/签退的网站，并登录进去。 打开浏览器开发者工具，在控制台中输入以下代码，获取对应的表单数据和cookies值，并将其保存到变量中： var formdata = new FormData(document.querySelector(‘form’)); …

    JavaScript 2023年6月11日
    00

  • JS 添加网页桌面快捷方式的代码详细整理

    下面是“JS 添加网页桌面快捷方式的代码详细整理”的完整攻略。 什么是网页桌面快捷方式 网页桌面快捷方式指的是在计算机桌面上创建的一个链接，可以直接打开指定网页。用户只需点击桌面图标即可快速访问网页，无需打开浏览器、输入网址等操作。 实现方式 要在网页中添加桌面快捷方式，需要使用JavaScript。下面是整个实现过程的步骤： 首先，需要判断浏览器是否支持该…

    JavaScript 2023年5月27日
    00

  • AJAX简单测试代码实例

    下面我详细讲解一下“AJAX简单测试代码实例”的完整攻略。 AJAX简单测试代码实例 AJAX概述 AJAX（Asynchronous JavaScript And XML）即异步的JavaScript与XML技术。它允许web页面异步地更新部分内容，从而避免了页面全部刷新，提升了用户体验。 AJAX原理 AJAX是通过XMLHttpRequest对象实现的…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部