关于vue使用Element Plus框架的时候,使用Menu菜单的时候,遇到了一些问题,解决了

本文介绍了如何在Vue应用中,通过监听路由变化,实现在`add.vue`页面点击按钮切换路由时,同步更新`el-menu`组件的状态,确保菜单状态栏随页面跳转实时更新。解决方案包括在设置文件中定义默认状态并监听路由变化进行动态调整。
摘要由CSDN通过智能技术生成

主要是在我创建的 add.vue 的页面中点击按钮跳转的时候,成功切换到另外一个路由,但是菜单下的状态条不会因此改变,所以有了下面的解决方法.

这个是错误的,点击按钮切换了,但是状态没有切换

在这里插入图片描述
在这里插入图片描述

解决方法
在定义菜单的页面中使用

这是页面内容
<el-menu
    mode="horizontal"
    class="el-menu-demo"
    :default-active="ZhuagnTai"
>
<el-menu-item index="1">
    <router-link to="/look">展示文章</router-link>
</el-menu-item>
<el-menu-item index="2">
    <router-link to="/add">发表文章</router-link>
</el-menu-item>
</el-menu>
这是setup()中的内容
setup(){
       // 使用路由
       const route = useRoute()
       // 把ZhuagnTai的状态定义为1,默认的,对应的是 el-menu-item标签下的index
       let ZhuagnTai = ref('1')
       // 监听事件,监听route.path的变化
       watch(()=>route.path,(newPath,oldPath)=>{
           // 产生的新的路由进行判断,进行赋值
           if(newPath === '/look'){
               ZhuagnTai.value = '1'
           }else if(newPath === '/add'){
               ZhuagnTai.value = '2'
           }
       })
       return{
           ZhuagnTai
       }
   }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值