新建组件Tabbar
并引入Home页面中
编辑Tabbar组件
<template>
<div class="tabbr">
<ul>
<li
v-for="(item, index) in routerList"
:key="index"
@click="switchTab(item.path)"
>
<img
:src="$route.path.includes(item.path) ? item.selected : item.active"
alt=""
/>
<span :class="$route.path.includes(item.path) ? 'active' : ''">{{
item.title
}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
routerList: [
{
title: "首页",
path: "/home",
active: "./images/home_default.png",
selected: "./images/home_selected.png",
},
{
title: "分类",
path: "/list",
active: "./images/category_default.png",
selected: "./images/category_selected.png",
},
{
title: "购物车",
path: "/cart",
active: "./images/shoppingcart_default.png",
selected: "./images/shoppingcart_selected.png",
},
{
title: "我的",
path: "/my",
active: "./images/mine_default.png",
selected: "./images/mine_selected.png",
},
],
};
},
methods: {
switchTab(path) {
//判断是否点击的是同一个路由
if (this.$route.path == path) return;
//对应跳转页面
this.$router.replace(path);
},
},
};
</script>
<style scoped >
.tabbr {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 999;
height: 1.3333rem;
background-color: #fff;
}
.tabbr ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.tabbr ul li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tabbr ul li img {
width: 0.8267rem;
height: 0.8267rem;
}
.tabbr ul li span {
font-size: 16px;
}
.active {
color: green;
}
</style>
主页Home设置重定向