木灵鱼儿
阅读:1477
如何将导航菜单与路由结合
路由的数组,他也是层级的关系,而我们的导航菜单与路由数组一样,也是一个层级关系,并且大部分内容都是对应的,一个路由页对应一个菜单按钮。
所以,其实我们可以直接将路由数组,作为我们的导航菜单的数据,我们对他进行遍历。
针对性隐藏
父级
但是不一定每个路由都要显示在菜单栏上,所以我们可以给路由数组的对象,增加一个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>
然后基本就是这样了,这个就是我对导航菜单和路由结合的一个理解。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

.native修饰符 做了什么
估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...
实现一个点击自动滚动到指定元素,并让input元素聚焦
效果图思路分析tab切换在vue中,tab的切换只需要改动tab组件的active属性即可,所以,我们只需要对点击的元素,点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计,比如html元素可以使用data属性。聚焦聚焦就很简单了,input元素有focus方法,运行就会聚焦。滑动定位利用scrollIntoView方法,可以达到定位的效果,配置属性,就会有动画。element.scrollIntoView({behavior:"smooth"})MDN:Element.scrollIntoView()点击这个元素,从data属性上获取要滚动的元...
