Vue的输入url高亮菜单

最新推荐文章于 2024-05-15 11:55:14 发布

Mr.ZYG

最新推荐文章于 2024-05-15 11:55:14 发布

阅读量489

点赞数

分类专栏： Vue初学文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/Tel_17674647975/article/details/127026497

版权

Vue初学专栏收录该内容

6 篇文章

订阅专栏

本文展示了如何在Vue.js中创建一个动态菜单，根据当前路由设置默认激活项，实现菜单高亮。通过设置`default-active`属性为`$route.path`，并结合`<el-menu-item>`和`<el-sub-menu>`组件，可以创建一个多级菜单，并在用户导航时自动突出显示当前页面对应的菜单项。此外，还提供了示例代码帮助理解实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先设置一个动态的path

:default-active="path"

下面的菜单栏中添加

<el-menu-item index="/user">用户管理</el-menu-item>

<el-menu-item index="/book">书籍管理</el-menu-item>

index="/" 我要去的路径记得加”/”

最后在方法中做一个返回即可

data(){
  return{
    path: this.$route.path  //设置默认菜单高亮
  }
}

代码

<template>
<div>
  <el-menu
      style="width: 200px;min-height: calc(100vh - 50px)"
      :default-active="path"
      router
      class="el-menu-vertical-demo"
  >
    <el-sub-menu index="1">
      <template #title>管理系统
      </template>
<!--      <el-menu-item-group title="系统管理">-->
        <el-menu-item index="/user">用户管理</el-menu-item>
<!--        <el-menu-item index="1-2">item two</el-menu-item>-->
<!--      </el-menu-item-group>-->
    </el-sub-menu>
      <el-menu-item index="/book">书籍管理</el-menu-item>
<!--      <el-menu-item-group title="Group Two">-->
<!--        <el-menu-item index="1-3">item three</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-sub-menu index="1-4">-->
<!--        <template #title>item four</template>-->
<!--        <el-menu-item index="1-4-1">item one</el-menu-item>-->
<!--      </el-sub-menu>-->

<!--    <el-menu-item index="2">-->
<!--      <el-icon><icon-menu /></el-icon>-->
<!--      <span>Navigator Two</span>-->
<!--    </el-menu-item>-->
<!--&lt;!&ndash;    disable 可读&ndash;&gt;-->
<!--    <el-menu-item index="3" disabled>-->
<!--      <el-icon><document /></el-icon>-->
<!--      <span>Navigator Three</span>-->
<!--    </el-menu-item>-->
<!--    <el-menu-item index="4">-->
<!--      <el-icon><setting /></el-icon>-->
<!--      <span>Navigator Four</span>-->
<!--    </el-menu-item>-->
  </el-menu>

</div>
</template>

<script>
export default {
  name: "Aside",
  data(){
    return{
      path: this.$route.path  //设置默认菜单高亮
    }
  }
}
</script>

<style scoped>

</style>