Vue实现底部导航

知识点总结：vue-router、slot插槽，练习封装思想

Home.vue

<template>
	<h2>首页</h2>
</template>

<script>
</script>

<style>
</style>

Classify.vue

<template>
	<h2>分类</h2>
</template>

<script>
</script>

<style>
</style>

ShopCart.vue

<template>
	<h2>购物车</h2>
</template>

<script>
</script>

<style>
</style>

My.vue

<template>
	<h2>我的</h2>
</template>

<script>
</script>

<style>
</style>

TabBar.vue

<template>
	<div id="tab-bar">
		<slot></slot>
	</div>
</template>

<script>
	export default {
		name: 'TabBar'
	}
</script>

<style scoped>
	#tab-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #f6f6f6;
		box-shadow: 0 -1px 1px rgba(100, 100, 100, .1);
	}
</style>

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 :style="activeStyle">
			<slot name="item-text"></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'TabBarItem',
		props: {
			path: String,
			activeColor: {
				type: String,
				default: '#1296db'
			}
		},
		computed: {
			isActive() {
				return this.$route.path.indexOf(this.path) !== -1
			},
			activeStyle() {
				return this.isActive ? {color: this.activeColor} : {}
			}
		},
		methods: {
			itemClick() {
				this.$router.replace(this.path).catch(() => {})
			}
		}
	}
</script>

<style>
	.tab-bar-item {
		flex: 1;
		text-align: center;
		height: 49px;
		font-size: 14px;
	}

	.tab-bar-item img {
		display: inline-block;
		width: 24px;
		height: 24px;
		margin-top: 3px;
		vertical-align: middle;
	}
</style>

App.vue

<template>
  <div id="app">
	  <router-view></router-view>
	  <tab-bar>
		  <tab-bar-item path="/home">
			  <img slot="item-icon" src="./assets/img/tabbar/icon_home.png" alt="首页">
			  <img slot="item-icon-active" src="./assets/img/tabbar/icon_home_active.png" alt="首页">
			  <div slot="item-text">首页</div>
		  </tab-bar-item>
		  <tab-bar-item path="/classify">
			  <img slot="item-icon" src="./assets/img/tabbar/icon_classify.png" alt="分类">
			  <img slot="item-icon-active" src="./assets/img/tabbar/icon_classify_active.png" alt="分类">
			  <div slot="item-text">分类</div>
		  </tab-bar-item>
		  <tab-bar-item path="/shopcart">
			  <img slot="item-icon" src="./assets/img/tabbar/icon_shopcart.png" alt="购物车">
			  <img slot="item-icon-active" src="./assets/img/tabbar/icon_shopcart_active.png" alt="购物车">
			  <div slot="item-text">购物车</div>
		  </tab-bar-item>
		  <tab-bar-item path="/my">
			  <img slot="item-icon" src="./assets/img/tabbar/icon_my.png" alt="我的">
			  <img slot="item-icon-active" src="./assets/img/tabbar/icon_my_active.png" alt="我的">
			  <div slot="item-text">我的</div>
		  </tab-bar-item>
	  </tab-bar>
  </div>
</template>

<script>
	import TabBar from './components/tabbar/TabBar.vue'
	import TabBarItem from './components/tabbar/TabBarItem.vue'

export default {
  name: 'App',
  components: {
	TabBar,
	TabBarItem
  }
}
</script>

<style>
	@import url("./assets/css/base.css");
</style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../views/home/Home.vue')
const Classify = () => import('../views/classify/Classify.vue')
const ShopCart = () => import('../views/shopcart/ShopCart.vue')
const My = () => import('../views/my/My.vue')

Vue.use(VueRouter)

const routes = [
	{
		path: '',
		redirect: '/home'
	},
	{
		path: '/home',
		component: Home
	},
	{
		path: '/classify',
		component: Classify
	},
	{
		path: '/shopcart',
		component: ShopCart
	},
	{
		path: '/my',
		component: My
	}
]

const router = new VueRouter({
	routes,
	mode: 'history'
})

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)
})

文件路径图