<div class="nav-div">
<div v-for="(menu,index) in menuList" :key="index">
<router-link :to="{path:menu.url}">
<span><img :src="menu.img" alt=""></span>
<p>{{menu.name}}</p>
</router-link>
</div>
</div>
menuList: [
{
name:'首页',
img:require('../../images/Index/home-act.png'),
url:'/indexKG',
active:require('../../images/Index/home.png'),
},
{
name:'设备监控',
img:require('../../images/Index/monitor-act.png'),
url:'/equipment',
active:require('../../images/Index/monitor.png'),
},
{
name:'能耗分析',
img:require('../../images/Index/statistics-act.png'),
url:'/consumption'
},
{
name:'综合报表',
img:require('../../images/Index/Report-act.png'),
url:'/comprehensive'
},
{
name:'故障报警',
img:require('../../images/Index/faultAlarm-act.png'),
url:'/fault'
},
{
name:'工单管理',
img:require('../../images/Index/Operation-act.png'),
url:'/workorder'
},
{
name:'系统管理',
img:require('../../images/Index/manage-act.png'),
url:'/system'
}
],
怎么让导航栏切换的时候把图标也切换了?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- qq_40471785 2021-09-23 09:38关注
在路由配置的地方给每个路由添加name,一般是把path的第一个字母大写。
比如首页的:{ name: 'IndexKG', path: 'indexKG' },
在menuList每个对象里加个参数routeName,跟路由配置的name写成一样
img标签绑定src改成 :src=" $route.name == menu.routeName ? menu.active : menu.img "本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
- ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
- ¥16 mybatis的代理对象无法通过@Autowired装填
- ¥15 可见光定位matlab仿真
- ¥15 arduino 四自由度机械臂
- ¥15 wordpress 产品图片 GIF 没法显示
- ¥15 求三国群英传pl国战时间的修改方法
- ¥15 matlab代码代写,需写出详细代码,代价私
- ¥15 ROS系统搭建请教(跨境电商用途)
- ¥15 AIC3204的示例代码有吗,想用AIC3204测量血氧,找不到相关的代码。