vue导航图标为图片时怎么加载激活图片

如果当前路由和导航中的路由一致，则加载激活状态的图片，否则，加载非激活图片

<template>
	<el-footer>
		<el-row>
			<el-col :span="6" v-for="(item,index) in paths" :key="index">
				<router-link :to="item.path">
					<div class="grid-content">
						<img :src="item.path == $route.path ? item.img_active : item.img" />
						<p>{{item.name}}</p>
					</div>
				</router-link>
			</el-col>
		</el-row>
	</el-footer>
</template>

<script>
	export default {
		name: 'navbar',
		data() {
			return {
				paths : [{
					path: '/',
					img: '../../../static/icons/home.png',
					img_active: '../../../static/icons/home_active.png',
					name:'首页'
				}, {
					path: '/type',
					img: '../../../static/icons/type.png',
					img_active: '../../../static/icons/type_active.png',
					name:'分类'
				}, {
					path: '/shopping',
					img: '../../../static/icons/shopping.png',
					img_active: '../../../static/icons/shopping_active.png',
					name:'购物中心'
				}, {
					path: '/mine',
					img: '../../../static/icons/mine.png',
					img_active: '../../../static/icons/mine_active.png',
					name:'个人中心'
				}]
			}
		}
	}
</script>