木灵鱼儿

木灵鱼儿

阅读:816

最后更新:2020/12/06/ 0:53:58

如何将导航菜单与路由结合

路由的数组,他也是层级的关系,而我们的导航菜单与路由数组一样,也是一个层级关系,并且大部分内容都是对应的,一个路由页对应一个菜单按钮。

所以,其实我们可以直接将路由数组,作为我们的导航菜单的数据,我们对他进行遍历。

针对性隐藏

父级

但是不一定每个路由都要显示在菜单栏上,所以我们可以给路由数组的对象,增加一个key值用于判断,这个路由对象是否需要出现在导航栏上,如:

export default [{
        path: "/admin",
        component: () =>
            import ("@/views/admin")
    },
    {
        path: "/form",
        component: () =>
            import ("@/views/admin"),
        hideInMenu:  true,
    }
]

我们设置了一个hideInMenu属性,他的值为true,那么就表示,这个路由对象,我们不让他显示在菜单栏上,所有在遍历的时候v-if做个判断即可。

当然,我们的路由不可能只有一个层级,他是有可能有子级路由的,所以他会有一个children属性,那么我们可以通过判断是否有children属性,来是否在导航栏菜单增加子级导航菜单

子级

但是,在导航栏上,不一定所有的子级都要遍历上去,所以,我们也可以对是否遍历子级,做一个key值

export default [
  {
    path: "/admin", component: () => import("@/views/admin")
  },
  {
    path: "/form", component: () => import("@/views/admin"),
    hideInMenu: true,
  },
  {
    path: "/child", component: () => import("@/views/admin"),
    hideChildrenInMenu: true,
    children: [
      { path: "",name:"a",  component: () => import("@/views/child/a") },
      { path: "b",name:"b",  component: () => import("@/views/child/b") },
    ]

  },
]

hideChildrenInMenu: true表示这个路由的子级children不显示在导航菜单里。

我们通过这两个key值对这个路由数组进行标识,当导航栏通过这个路由数组进行遍历是,针对性的显示或者隐藏。

获取这个路由数组

既然要通过这个路由数组进行遍历,那么首先我们需要获取到这个数据才行。

有两种方式拿到数据:

1. 通过$router全局的路由根对象获取

this.$router.options.routes

在vue文件里面,通过this来获取到全局$router对象,然后获取他的配置属性options,从配置中我们拿到路由数组routes。

这个routes就是我们配置的路由数组对象了。

import引入

既然我们最终拿到的是routes这个数组,那么我们也可以通过导入的方式获取。

假设我们有一个routes.js文件,他export导出了一个路由数组对象,那么我可以直接引入

import routes from "@/router/routes";

对routes数组进行递归

我们进行一个约定:只有存在name属性的路由,我们才将它显示到菜单上

数据拿到以后,我们肯定是需要做一个遍历操作,将需要的内容,我们提取出来,然后给导航菜单遍历。

那么我们还要考虑到一个问题,就是层级的问题,我们的层级不一定是只有一层,children里面可能还有children。

于是一个不得不进行递归的现实展现在我们面前,我们必须进行递归操作,才能完整拿到需要遍历的数组对象。

于是:

methods: {
  getMenuData(routes = []) {
    const menuData = [];
    routes.forEach((route) => {
      //是否显示自己
      if (route.name && !route.hideInMenu) {
        const newRoute = { ...route }; //解构赋值到新变量上
        delete newRoute.children; //删除children,因为需要判断
        //是否有子级,并且显示
        if (route.children && !route.hideChildrenInMenu) {
          //递归并赋值
          newRoute.children = this.getMenuData(route.children);
        }
        //一个判断递归结束
        menuData.push(newRoute);
      } else if (
        !route.hideInMenu &&
        !route.hideChildrenInMenu &&
        route.children
      ) {
        //有子级,但是不隐藏自己,也不隐藏子级
        //拿到子级,并将其提升层级,丢到外面
        menuData.push(...this.getMenuData(route.children));
      }
    });
    return menuData;
  }
}

我们接受一个数组,并对这个数组进行遍历。

如果这个route对象存在name,并且不隐藏自己,我们就创建一个变量存储这个route对象。

但是我们还要判断这个route对象是否有子级,加上子级有可能是不显示的,所以先进行delete删除,然后if判断

如果这个route存在children,并且不隐藏子级,我们就对他进行递归。

最后递归结束后我们将这个newRoute变量push到总的新数组menuData里面

然后我们还要考虑到一种情况,就是没有name的情况,那么一般来说他可能是这样的路由结构

{
    path: "/child", component: () => import("@/views/admin"),
    children: [
      { path: "",name:"a", component: () => import("@/views/child/a") },
      { path: "b",name:"b", component: () => import("@/views/child/b") },
    ]
  },

父级里面有一个默认子路由,默认路由有name(父级的name值必须给子级默认路由)

所以

我们还需要判断一下这个情况,一般我们的做法就是将这个路由里面的children提出来,升层,子级变为父级了,当然你也可以将它作为一个子级来做。

我的写法是拿出来升层。

menuData.push(...this.getMenuData(route.children));

先进行递归,拿到数组后,使用扩展运算符将数组里的内容拿出来,push进menuData

如果有必要,也可以写成子级,不升层,那实际上和if(route.nam...)差不多了,那么约定就没啥用了,这个就不多说了。

我们拿到数组之后,就可以进行导航菜单的遍历了。

导航菜单的生成

这里就有一个问题,既然我们不知道层级有多深,那么生成导航菜单时,也是不知道这个菜单要遍历几次的,所以也需要使用递归。

递归有两种方式,一种是组件递归和函数式组件递归。

组件递归

组件有一个name属性,我们设置个name属性,然后直接像组件一样使用

<template>
  <div>
    <menu/>
  </div>
</template>
<script>
  export default {
    name:"menu",
  }
</script>

但是有一点我们需要注意,在使用递归的时候,一定要加一个限制,否则递归无限制,肯定会报错的。

这个限制,在这个导航菜单里,就是层级的数量了,有多少层,我递归的是就递归几次,如果没有了,我们就停止递归。

这个判断无非就是if(children)判断children是否存在了。

函数式组件递归

函数式组件递归,需要和父组件配合。

父组件

<template>
  <div>
    <menu/>
  </div>
</template>
<script>
  import Menu  from "./Menu";
  export default {
    components: {
      "menu": Menu,
    },
    
  }
</script>

函数式组件

<template functional>
  <div>
    <menu/>
  </div>
</template>
<script>
export default {
  props: ["data"],
}
</script>

函数式组件没有name,所以父组件引入这个组件,并注册的时候,那个key值就是name了,只要函数式组件内使用相同key值名称的组件,就可以进行递归。

注意就是在函数式组件内,参数通过props接收,比如上面我们用了一个data。

如果要使用的话和vue组件的用法不一样,如:

<template functional>
  <div>
    <span>{{props.data.meta.title}}</span>
    <menu :key="props.data.path"/>
  </div>
</template>
<script>
export default {
  props: ["data"],
}
</script>

需要加上props这个前缀。

示例代码

父级组件

<template>
  <div class="nav">
    <ul>
      <template v-for="route in menuData">
        <!-- 无子级 -->
        <li v-if="!route.children" :key="route.name">{{route.meta.title}}</li>
        <!-- 有子级 -->
        <menu :data="route" :key="route.name">
      </template>
    </ul>
  </div>
</template>
<script>
import Menu  from "./Menu";
export default {
  components: {
    "menu": Menu,
  },
};
</script>

子级函数式组件

<template functional>
  <div class="child">
    <h2 class="title">{{props.data.meta.title}}</h2>
    <ul>
      <template v-for="route in props.data.children">
        <!-- 无子级 -->
        <li v-if="!route.children" :key="route.name">{{route.meta.title}}</li>
        <!-- 有子级 -->
        <menu :data="route" :key="route.name">
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["data"],
};
</script>

然后基本就是这样了,这个就是我对导航菜单和路由结合的一个理解。

版权申明

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

关于作者

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

相关文章