问题描述
想在footer模块通过路由的改变去改变相应的图片和字体颜色，涉及到组件复用和怎么接受meta路由元信息
解决：
在路由配置项上传递路由元信息
export default new Router({
routes: [
{
path: '/',
redirect: '/home',
},
{
path:"/home",
name:"home",
component:Home,
meta:{
//tab栏的显示
flag:true,
//路由的守卫
requireAuth:true,
activeindex:0
}
},
{
path:"/decorate",
name:"decorate",
component:Decorate,
meta:{
flag:true,
requireAuth:true,
activeindex:1
}
},
{
path:"/issue",
name:"issue",
component:Issue,
meta:{
//tab栏的显示
flag:true,
//路由的守卫
requireAuth:true,
activeindex:2
}
},
{
path:"/style",
name:"style",
component:Style,
meta:{
//tab栏的显示
flag:true,
//路由的守卫
requireAuth:true,
activeindex:3
}
},
{
path:"/my",
name:"my",
component:My,
meta:{
//tab栏的显示
flag:true,
//路由的守卫
requireAuth:true,
activeindex:4
}
},
{
path:"**",
component:Err
}
]
})
在footer.vue上
<template>
<div id="footer">
<ul>
<li v-for="(item,index) in navs">
<router-link :to="item.name">
<img :src="'static/footerimg/'+item.img" v-if="activeindex==index?false:true"/>
<img :src="'static/footerimg/'+item.img1" v-if="activeindex==index?true:false"/>
<span>{{item.title}}</span>
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
created(){
this.activeindex = this.$route.meta.activeindex;
/*获取到路由元信息传过来的值，因为created只会执行一次，所以可以用事件监听的方式来获取每一次路由改变时传过来的路由元信息*/
},
watch:{
"$route"(to,from){
this.activeindex = to.meta.activeindex;
}
},
data(){
return{
activeindex:-1,
navs:[
{
name:"home",
title:"首页",
img:"home.png",
img1:"home1.png",
},
{
name:"decorate",
title:"装修",
img:"decorate.png",
img1:"decorate1.png",
},
{
name:"Issue",
title:"发布",
img:"putout.png",
img1:"putout.png",
},
{
name:"style",
title:"风格",
img:"styleimg.png",
img1:"style1.png",
},
{
name:"my",
title:"我的",
img:"my.png",
img1:"my1.png",
}
]
}}
}
</script>
<style scoped>
#footer ul li .router-link-active{
/*router-link 标签 在选中的时候 会自动给整个标签添加一个 router-link-active的class 你可以根据这个class 设置他的样式。 如果再选中 其他的。 这个class 就会消失 。 从而样式也就会消失*/
color: #7FD0A3 !important;
}
</style>