Vuex 实现tabbar 路由跳转

实现效果  点击底部导航 实现路由的跳转 底部图片的切换（实现的方法千千万  这是我的写法）

 我是在 components 中创建了五个文件夹，分别是我切换的页面。在views中home.vue 是我的主页面

 接下来在router中的index.js中配置路由，注意文件的路径

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Cate from "../components/cate/Cate.vue" //类别
import City from "../components/city/City.vue" //同城
import Mine from "../components/mine/Mine.vue" //我的
import Page from "../components/page/Page.vue" //首页
import Shopping from "../components/shop/Shopping.vue" //购物车

Vue.use(VueRouter)

const routes = [{
	path: '/',
	name: 'Home',
	component: Home,
	children: [
	
	{
		path: '/Home/page',
		name: 'Page',
		component: Page,

	},
	{
		path: '/Home/cate',
		name: 'Cate',
		component: Cate,
	
	},
	{
		path: '/Home/city',
		name: 'City',
		component: City,
	
	},
	{
		path: '/Home/mine',
		name: 'Mine',
		component: Mine,
	
	},
	{
		path: '/Home/shopping',
		name: 'Shopping',
		component:Shopping,
	
	},
	]
}]

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})

export default router

接下来我们就在 views中的home.vue中操作，注意图片必须用require

<template>
	<div class="home">
		<router-view />
		<div class="tabbar">
			<router-link :to="item.path" v-for="(item,index) in arr" :key='item.text'>
				<div class="lis" >
					<img :src="item.path===$route.path?arr[index].imge:arr[index].imgs" alt="">
					<span>{{item.text}}</span>
				</div>
			</router-link>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				arr: [{
						imgs: require('../assets/image/home.png'),
						imge: require('../assets/image/home_ed.png'),
						flag: true,
						text: '首页',
						path: '/Home/page'
					},
					{
						imgs: require('../assets/image/classify.png'),
						imge: require('../assets/image/classify_ed.png'),
						flag: true,
						text: '分类',
						path: '/Home/cate'
					},
					{
						imgs: require('../assets/image/city_wide.png'),
						imge: require('../assets/image/city_wide_ed.png'),
						flag: true,
						text: '同城',
						path: '/Home/city'
					},
					{
						imgs: require('../assets/image/shop_car.png'),
						imge: require('../assets/image/shop_car_ed.png'),
						flag: true,
						text: '购物车',
						path: '/Home/shopping'
					},
					{
						imgs: require('../assets/image/user.png'),
						imge: require('../assets/image/user_ed.png'),
						flag: true,
						text: '我的',
						path: '/Home/mine',
					},

				]
			}
		},
		name: 'Home',
		methods: {
			

		},

		// 注册组件
		components: {

		}
	}
</script>
<style scoped>
	* {
		text-decoration: none;
	}

	/* 底部tabbar */
	.tabbar {
		width: 10rem;
		height: 13.3333vw;
		
		border-top: 0.01rem solid rgb(26, 25, 25);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-evenly;

	}

	.lis {
		height: 13.3333vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		justify-content: space-evenly;
	}

	.lis img {
		width: 4.2667vw;
		height: 4.8vw;
	}

	.lis span {
		font-size: 2.6667vw;
		color: #333333;
	}

	
</style>

 这样我们想要的 tabbar切换效果就可以实现了