App.vue
<template>
<div id="app">
<router-view></router-view>
<main-tab-bar></main-tab-bar>
</div>
</template>
<script>
import MainTabBar from "./components/mainTabBar/MainTabBar";
export default {
name: "App",
components: {
MainTabBar,
},
};
</script>
<style scoped>
@import "./assets/css/base.css";
</style>
TabBar.vue
<template>
<div id="icon">
<slot></slot>
</div>
</template>
<script>
export default {
name: "TabBar",
components: {},
};
</script>
<style scoped>
#icon {
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 49px;
box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.15);
}
</style>
TabBarItem.vue
<template>
<div class="icon-item" @click="itemclick">
<div v-if="!isactive"><slot name="item-icon"></slot></div>
<div v-else><slot name="item-icon-active"></slot></div>
<div :style="activestyle"><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name: "TabBarItem",
components: "",
data() {
return {
// isactive: true,
};
},
computed: {
isactive() {
return this.$route.path.indexOf(this.path) != -1;
},
activestyle() {
return this.isactive ? { color: this.activeColor } : {};
},
},
props: {
path: String,
activeColor: {
tyle: String,
default: "red",
},
},
methods: {
itemclick() {
this.$router.push(this.path).catch((err) => {});
},
},
};
</script>
<style scoped>
.icon-item {
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.icon-item img {
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
MainTabBar.vue
<template>
<div>
<tab-bar>
<tab-bar-item path="/home" activeColor="deeppink">
<template v-slot:item-icon>
<img src="@/assets/img/tabbar/home.svg" alt="" />
</template>
<template v-slot:item-icon-active>
<img src="@/assets/img/tabbar/home_active.svg" alt="" />
</template>
<template v-slot:item-text>
<div>首页</div>
</template>
</tab-bar-item>
<tab-bar-item path="/category" activeColor="deeppink">
<template v-slot:item-icon>
<img src="@/assets/img/tabbar/category.svg" alt="" />
</template>
<template v-slot:item-icon-active>
<img src="@/assets/img/tabbar/category_active.svg" alt="" />
</template>
<template v-slot:item-text>
<div>分类</div>
</template>
</tab-bar-item>
<tab-bar-item path="/cart" activeColor="deeppink">
<template v-slot:item-icon>
<img src="@/assets/img/tabbar/shopcart.svg" alt="" />
</template>
<template v-slot:item-icon-active>
<img src="@/assets/img/tabbar/shopcart_active.svg" alt="" />
</template>
<template v-slot:item-text>
<div>购物车</div>
</template>
</tab-bar-item>
<tab-bar-item path="/profile" activeColor="deeppink">
<template v-slot:item-icon>
<img src="@/assets/img/tabbar/profile.svg" alt="" />
</template>
<template v-slot:item-icon-active>
<img src="@/assets/img/tabbar/profile_active.svg" alt="" />
</template>
<template v-slot:item-text>
<div>我的</div>
</template>
</tab-bar-item>
</tab-bar>
</div>
</template>
<script>
import TabBar from "@/components/tabbar/TabBar";
import TabBarItem from "@/components/tabbar/TabBarItem";
export default {
name: "MainTabBar",
components: { TabBar, TabBarItem },
};
</script>
<style scoped>
</style>
路由中index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
path: '',
redirect: '/home'
},
{
path: '/home',
meta: {
title: '首页'
},
component: () => import('../views/home/Home')
},
{
path: '/category',
meta: {
title: '分类'
},
component: () => import('../views/category/Category')
},
{
path: '/cart',
meta: {
title: '购物车'
},
component: () => import('../views/cart/Cart')
},
{
path: '/profile',
meta: {
title: '我的'
},
component: () => import('../views/profile/Profile')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//标题 全局守卫
router.beforeEach((to, from, next) => {
// 从from跳转到to
document.title = to.matched[0].meta.title;
// document.title = to.meta.title
//console.log(to);
// console.log('++++');
next()
})
export default router