木灵鱼儿

木灵鱼儿

阅读:304

最后更新:2021/07/09/ 14:28:29

关于element侧边栏导航一些新想法

高亮问题

由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。

常见的场景: 详情页

为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。

常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name

那么这个activeRoute怎么配置呢?

我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。

那么如果没有父级,就使用自己

遵循这个原则,我们对el-menudefault-active就需要这样做

<template>
  ...省略
     <el-menu :default-active="activeName">
        ...省略
     </el-menu>
  ...省略
</template>
<script>
  export default {
    data() {
       activeName: "", //高亮的路由name
    },
    methods:{
      //设置高亮的路由name
      setActiveRouterName(matched = []) {
        let name = "";
        //最上层路由的activeMenu
        const firstRoute = matched.find((route) => route.meta.activeMenu);
        if (firstRoute) {
          name = firstRoute.meta.activeMenu;
        } else {
          //没有activeMenu使用最后一个路由name
          const lastRoutes = matched.filter((route) => route.name);
          if (lastRoutes.length) name = lastRoutes.pop().name;
        }
        this.activeName = name;
      },
    },
    created() {
      //首次
      this.setActiveRouterName(this.$route.matched);
    },
    watch: {
      //监听路由
      $route(val) {
        this.setActiveRouterName(val.matched);
      },
    }
  }
</script>

利用路由的matched层级数组,得到我们需要的数据

点击非子菜单的按钮,关闭已展开的菜单

这个是饿了么侧边栏的功能问题,做不到,我想了个新的方式。

假设我们能拿到侧边栏的导航菜单的数组

<template>
  ...省略
     <el-menu >
       <!--大概意思就是for循环,然后绑定click事件 -->
        <el-menu-item v-for="item in sidebarData" :key="item.title" @click="onSidbarItemClick(item)">{{item.title}}</el-menu-item>
     </el-menu>
  ...省略
</template>
<script>
  export default {
    data() {
       sidebarData:[], //菜单数据
       chindrenData: null, //有子菜单的菜单数组
    },
    methods:{
      //菜单点击事件
      onSidbarItemClick(menuData) {
        //无子菜单
        if (!menuData.children) {
          this.onOffChindren();
        }
      },
      //关闭子菜单
      onOffChindren() {
        //获取所有有子菜单数据
        if (!this.chindrenData) {
          this.chindrenData = this.sidebarData.filter((item) => item.children);
        }
        //获取菜单组件实例
        if (!this.$refMenu) this.$refMenu = this.$refs["sidebarMenu"];
        //关闭所有子菜单
        this.chindrenData.forEach((item) => {
          this.$refMenu.close(item.name);
        });
      },
    },
  }
</script>

如果item没有children,说明没有子菜单,那么他就触发onOffChindren方法,onOffChindren遍历所有子菜单,手动关闭即可。

逻辑简单。

如果除了侧边栏,你还有其他点击进入路由的按钮,那么侧边栏就没法自动关闭已展开的菜单了,你需要把onOffChindren的方法抛出去,比如事件bus,或者vuex,或者通过拿到导航的实例,再触发,这个就看自己的项目需求了。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 304

相关文章