木灵鱼儿

木灵鱼儿

阅读：484

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

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

高亮问题

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

常见的场景： 详情页

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

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

那么这个activeRoute怎么配置呢？

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

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

遵循这个原则，我们对el-menu的default-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，或者通过拿到导航的实例，再触发，这个就看自己的项目需求了。

文章分类 vue 项目实战
文章标签 vueelement侧边栏导航
木灵鱼儿

木灵鱼儿

发布了 585 篇文章获得点赞 0获得阅读 484

版权申明

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

one
two
three

关于作者

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

相关文章

transform 知识补充transform 知识补充
grid布局grid布局
meta name= viewport 知识补充meta name= viewport 知识补充
flex布局知识补充flex布局知识补充
vue cli3-cli4 打包后项目在二级路径的方法vue cli3-cli4 打包后项目在二级路径的方法