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日

相关文章

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)

    下面是关于Bootstrap表单验证插件bootstrapValidator的完整攻略: 1. 什么是Bootstrap表单验证插件bootstrapValidator Bootstrap表单验证插件bootstrapValidator是一个基于Bootstrap3的表单验证插件,能够对常见的表单进行简单易用的验证,例如: 必填字段验证 电子邮件格式验证 U…

    JavaScript 2023年6月10日
    00
  • Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

    下面是对“Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解”的完整攻略: BootstrapValidator简介 BootstrapValidator是一款基于jQuery和Bootstrap的强大表单验证插件。它能够快速、简单地实现表单验证功能,并且拥有丰富的配置选项,支持多种类型的表单验证规则。 Bootstra…

    JavaScript 2023年6月10日
    00
  • 加速IE的Javascript document输出的方法

    加速IE的Javascript document输出的方法主要是通过减少代码量、避免重复的DOM操作、使用innerHTML代替元素属性和使用文档片段来优化代码执行效率。 具体的实现步骤包括以下几个方面: 减少代码量 减少不必要的代码量是不言而喻的,代码越多,执行效率越低。在Javascript中,我们可以借助数组的join方法来将字符串拼接,而不是使用循环…

    JavaScript 2023年5月28日
    00
  • Object.defineProperty()函数之属性描述对象

    我们来详细讲解一下“Object.defineProperty()函数之属性描述对象”。 属性描述对象介绍 在JavaScript中,一个对象的属性除了具有值(value)外,还可以具有其它的一些特性,例如它是否可遍历(enumerable)、是否可修改(writable)等。这些特性以属性描述对象(property descriptor)的形式来表示,通过…

    JavaScript 2023年5月27日
    00
  • 微信小程序 实战小程序实例

    微信小程序实战攻略 1. 准备工作 在开始之前,我们需要先了解微信小程序的基本概念和开发环境,并完成以下准备工作: 1.1. 注册小程序账号 在微信公众平台上注册小程序账号,获得小程序的开发者身份和权限。 1.2. 下载开发工具 下载官方提供的开发工具 微信开发者工具,完成安装后即可开始开发测试。 1.3. 学习基础知识 学习小程序的常用API和基本语法,熟…

    JavaScript 2023年5月28日
    00
  • IE8中使用javascript动态加载CSS的解决方法

    在IE8浏览器中,如果想要使用JavaScript动态加载CSS样式,可以采用以下两种方法: 方法一:使用document.createStyleSheet document.createStyleSheet是IE浏览器专门提供的一个API,可以用于动态创建样式表,并插入到页面中。它的代码如下: if(document.createStyleSheet) {…

    JavaScript 2023年5月27日
    00
  • JS实现获取来自百度,Google,soso,sogou关键词的方法

    获取来自百度、Google、soso、sogou等搜索引擎的关键词,可以通过以下步骤进行: 获取referral信息: 搜索引擎会将搜索关键词作为URL参数传递给你的网站,这些参数通常是在HTTP Referrer中传递的。因此,可以通过获取HTTP Referrer来获取搜索关键词。在JavaScript中,可以通过以下代码获取HTTP Referrer信…

    JavaScript 2023年6月10日
    00
  • JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

    JavaScript基于DOM操作实现查找、修改HTML元素的内容及属性的方法,可以通过以下步骤实现: 使用JavaScript中的document对象查找HTML元素 在JavaScript中,通过document对象可以查找HTML元素,可以使用以下方法: getElementById:根据元素的id属性来查找HTML元素。 getElementsByC…

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