主要是在我创建的 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
       }
   }
Logo

前往低代码交流专区

更多推荐