vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

本文介绍了如何在Vue项目中结合Element UI库动态生成el-menu导航,并在页面刷新后保持当前菜单选中状态及对应路由。通过关键代码演示了解实现这一功能的具体步骤。

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

路由:  
const routes = [
    {
      path: '/',
      name: 'Home',
      meta:{isLogin:true,title: 'Home'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/index.vue"],resolve)),
      children: [
        {
          path: '/monitor',
          name: 'monitor',
          meta:{isLogin:true,title: 'monitor'},// 添加该字段,表示进入这个路由是需要登录的
          component: resolve=>(require(["@/views/monitor.vue"],resolve))
        },
        {
          path: '/realTime',
          name: 'realTime',
          meta:{isLogin:true,title: 'realTime'},// 添加该字段,表示进入这个路由是需要登录的
          component: resolve=>(require(["@/views/realTime.vue"],resolve))
        }
      ]
    },
    {
      path: '/homePage',
      name: 'homePage',
      meta:{isLogin:true,title: 'homePage'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/homePage.vue"],resolve))
    },
    {
      path: '/login',
      name: 'login',
      meta:{title: 'login'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/login.vue"],resolve))
    },
    {
      path: '/register',
      name: 'register',
      meta:{isLogin:true,title: 'register'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/register.vue"],resolve))
    },

    {
      path: '/history',
      name: 'history',
      meta:{isLogin:true,title: 'history'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/history.vue"],resolve))
    },
    {
      path: '/report',
      name: 'report',
      meta:{isLogin:true,title: 'report'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/report.vue"],resolve))
    },
    {
      path: '/report',
      name: 'report',
      meta:{isLogin:true,title: 'report'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/report.vue"],resolve))
    },
    {
      path: '/interval',
      name: 'interval',
      meta:{isLogin:true,title: 'report'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/component/statistics/interval.vue"],resolve))
    },
    {
      path: '/timeChara',
      name: 'timeChara',
      meta:{isLogin:true,title: 'report'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/component/statistics/timeChara.vue"],resolve))
    },
    {
      path: '/powerAnaly',
      name: 'powerAnaly',
      meta:{isLogin:true,title: 'report'},// 添加该字段,表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/component/statistics/powerAnaly.vue"],resolve))
    }
]

菜单
<el-menu
  router
  v-if="activeIndex"
  :default-active="activeIndex"
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="/homePage" class="el-menu-li">
    <i class="el-icon-menu"></i>
    <span slot="title">首页大屏</span>
  </el-menu-item>
  <el-menu-item index="/"  class="el-menu-li">
    <i class="el-icon-document"></i>
    <span slot="title">充电桩监控</span>
  </el-menu-item>
  <el-menu-item  index="/history"  class="el-menu-li">
    <i class="el-icon-setting"></i>
    <span slot="title">历史数据</span>
  </el-menu-item>
  <el-submenu index="4">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>统计分析</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="/interval">充电起止区间统计</el-menu-item>
      <el-menu-item index="/timeChara">充电时间特性</el-menu-item>
      <el-menu-item index="/powerAnaly">充电电量分析</el-menu-item>
    </el-menu-item-group>
  </el-submenu>

</el-menu>

关键以下代码

data() {
  return {
    activeIndex : '/homePage'
  }
},
watch: {
  $route () {
    this.setCurrentRoute()
  }
},
methods: {
  setCurrentRoute () {
    this.activeIndex = this.$route.path //关键   通过他就可以监听到当前路由状态并激活当前菜单
  },
  handleOpen(key, keyPath) {
    console.log(key, keyPath);
  },
  handleClose(key, keyPath) {
    console.log(key, keyPath);
  }
},
created () {
  this.setCurrentRoute()
},

 

 

 

 

 

 

 

 

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值