下面就来详细讲解如何用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路径加载相应的组件。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue封装一个Tabbar组件 带组件路由跳转方式 - Python技术站