router文件下的index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.安装插件
Vue.use(VueRouter)
// 3.配置映射关系
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: () => import('../views/home/Home')
},
{
path: '/category',
component: () => import('../views/category/Category')
},
{
path: '/shopcart',
component: () => import('../views/shopcart/Shopcart')
},
{
path: '/profile',
component: () => import('../views/profile/Profile')
}
]
// 2.创建路由对象
const router = new VueRouter({
routes,
mode: 'history'
})
// 3.导出路由
export default router
main.js文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
App.vue文件
<template>
<div id="app">
<router-view></router-view>
<main-tab-bar></main-tab-bar>
</div>
</template>
<script>
import MainTabBar from './components/MainTabBar'
export default {
name: 'App',
components: {
MainTabBar
}
}
</script>
<style>
@import "./assets/css/base.css";
</style>
components文件夹下的MainTabBar.vue文件
<template>
<tab-bar>
<tab-bar-item path="/home" v-bind:activeColor="color">
<img slot="item-icon" src="../assets/images/tabbar/home.svg" alt="" />
<img slot="item-icon-active" src="../assets/images/tabbar/home_active.svg" alt="" />
<div slot="item-text">首页</div>
</tab-bar-item>
<tab-bar-item path="/category" v-bind:activeColor="color">
<img slot="item-icon" src="../assets/images/tabbar/category.svg" alt="" />
<img slot="item-icon-active" src="../assets/images/tabbar/category_active.svg" alt="" />
<div slot="item-text">分类</div>
</tab-bar-item>
<tab-bar-item path="/shopcart" v-bind:activeColor="color">
<img slot="item-icon" src="../assets/images/tabbar/cart.svg" alt="" />
<img slot="item-icon-active" src="../assets/images/tabbar/cart_active.svg" alt="" />
<div slot="item-text">购物车</div>
</tab-bar-item>
<tab-bar-item path="/profile" v-bind:activeColor="color">
<img slot="item-icon" src="../assets/images/tabbar/profile.svg" alt="" />
<img slot="item-icon-active" src="../assets/images/tabbar/profile_active.svg" alt="" />
<div slot="item-text">我的</div>
</tab-bar-item>
</tab-bar>
</template>
<script>
import TabBar from '../components/tabbar/TabBar'
import TabBarItem from '../components/tabbar/tabBarItem'
export default {
name:"MainTabBar",
components: {
TabBar: TabBar,
TabBarItem: TabBarItem
},
data(){
return {
color:"#e205054d"
// color:"deepPink"
}
}
}
</script>
<style>
</style>
components文件夹下的tabbar文件下的TabBar.vue文件
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name: "TabBar"
}
</script>
<style>
#tab-bar {
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -1px 1px rgba(100,100,100,.3);
}
</style>
components文件夹下的tabbar文件下的tabBarItem.vue文件
<template>
<div class="tab-bar-item" @click="itemClick">
<div v-if="!isActive">
<slot name="item-icon"></slot>
</div>
<div v-else>
<slot name="item-icon-active"></slot>
</div>
<div v-bind:style="activeStyle">
<slot name="item-text"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'tabBarItem',
props: {
path: String,
activeColor: {
type: String,
default: '#f16b6b4d'
}
},
computed: {
isActive: function () {
return this.$route.path.indexOf(this.path) !== -1
},
activeStyle: function () {
return this.isActive ? {"color": this.activeColor} : {}
}
},
methods: {
itemClick: function () {
if(this.$router.history.current.path != this.path){
this.$router.replace(this.path)
}
}
}
}
</script>
<style>
.tab-bar-item{
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item img{
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
在src文件夹下创建一个views文件，分别创建文件夹profile，category，shopcart，home子文件夹，又在对应子文件夹创建同名以.vue为后缀的组件
