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

下面就来详细讲解如何用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)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS获取当前时间戳与时间戳转日期时间格式问题

    获取当前时间戳是JavaScript中一项基本操作,而将时间戳转化为日期时间格式也是开发过程中常用功能。本文将详细讲述这两个问题的解决方案。 获取当前时间戳 在JavaScript中获取当前的时间戳,我们可以使用Date对象的getTime()方法获取,该方法会返回从标准时间1970年1月1日 00:00:00 UTC到当前时间的毫秒数。 const tim…

    JavaScript 2023年5月27日
    00
  • javascript按钮禁用和启用的效果实例代码

    下面我将详细讲解“JavaScript按钮禁用和启用的效果实例代码”的完整攻略。 禁用按钮 原理:使用disabled属性禁用按钮。 示例代码 HTML代码: <button id="myBtn">提交</button> JavaScript代码: var myBtn = document.getElementBy…

    JavaScript 2023年6月10日
    00
  • 利用Three.js制作一个新闻联播开头动画

    利用Three.js制作一个新闻联播开头动画需要按照以下步骤进行: 1. 准备工作 首先,需要在前端项目中引入Three.js。可以通过CDN或者npm安装来引入Three.js。其次,需要在HTML文档中创建一个容器元素,如div,作为渲染这个场景的容器。 在JS文件中,需要定义渲染器、摄像机、场景,以及需要展示的物体。同时需要设置动画帧数,并创建相应的动…

    JavaScript 2023年6月11日
    00
  • JavaScript中array.reduce()数组方法的四种使用实例

    当我们使用JavaScript处理数组时,reduce()是一个非常有用的方法。reduce()方法允许我们通过迭代数组中的每个元素,并将它们组合成单个值来加工整个数组。下面详细来讲解如何使用reduce()方法,其中包括四种使用实例,每种用法都有一条示例。 1. 计算数组中所有元素的总和 const numbers = [1, 2, 3, 4, 5]; c…

    JavaScript 2023年5月27日
    00
  • js计算两个时间之间天数差的实例代码

    计算两个时间之间天数差的实例代码,具体流程如下: 1. 确定时间格式 在编写代码之前需要先确定所输入的时间格式是否固定,因为不同的时间格式需要使用不同的方法来处理。比如,常见的日期格式有yyyy-MM-dd、yyyy/MM/dd、MM/dd/yyyy等等。 2. 解析时间字符串 在解析时间字符串之前,需要先将时间字符串转换成时间戳。JavaScript提供了…

    JavaScript 2023年5月27日
    00
  • 复制js对象方法(详解)

    复制JS对象是很常见的操作,但是需要注意的是,在JS中,对象是引用类型,因此直接复制对象会导致对象引用被复制,而不是对象本身。这里介绍几种复制JS对象的方法,包括深拷贝和浅拷贝。 浅拷贝 浅拷贝可以简单地理解为将对象的属性复制一份到新的对象中,但是属性值为对象的属性仍然是引用关系。 表达式“{…obj}” ES6中引入了表达式“{…obj}”,可以用…

    JavaScript 2023年5月27日
    00
  • JavaScript框架编程第2/2页

    《JavaScript框架编程》第2/2页是一篇介绍如何编写JavaScript框架的教程。以下是该篇文章的完整攻略: 概述 JavaScript框架是为了使JavaScript代码更可重用、可扩展和易于维护而创造的。框架是为了解决开发过程中重复工作的问题,因此可以轻松地实现重复使用和扩展。编写框架可帮助开发人员组织自己的代码并使用固定的约定。 构建开发环境…

    JavaScript 2023年5月17日
    00
  • Next.js应用转换为TypeScript方法demo

    下面是关于将Next.js应用转换为TypeScript的完整攻略: 1. 安装TypeScript依赖 在项目根目录下,使用以下命令安装TypeScript依赖: npm install –save-dev typescript @types/react @types/node 这个命令会安装三个依赖包,其中: typescript:TypeScript…

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