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

最新推荐文章于 2023-09-21 00:09:04 发布

nongcunqq

最新推荐文章于 2023-09-21 00:09:04 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/nongcunqq/article/details/108715672

版权

两种方式
1.

<el-menu :default-active="$route.path"></el-menu>

2.（1）、设置属性 :default-active=“activeIndex”

（2）、watch方法检测路由变化

（3）、created生命周期设置路由

<template>
  <div id="app">
    <el-menu
      :default-active="activeIndex"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <i class="el-icon-document"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
    </el-menu>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/"
    };
  },
  // 检测路由变化
  watch: {
    $route() {
      this.setCurrentRoute();
    }
  },
  methods: {
    setCurrentRoute() {
      this.activeIndex= this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
    }
  },
  created() {
    this.setCurrentRoute();
  }
};
</script>