From 57eea00b09eae06bd19682ea6721eae73fba8730 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=8C=E7=84=B6?= <2575984447@qq.com> Date: Sun, 14 May 2023 13:52:04 +0000 Subject: [PATCH 1/4] 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陌然 <2575984447@qq.com> --- ...6\350\217\234\345\215\225\346\240\217.md " | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 "47\346\235\216\345\201\245/ 2023-05-08-vue-\345\233\276\346\240\207\346\227\213\350\275\254\346\224\266\350\217\234\345\215\225\346\240\217.md " diff --git "a/47\346\235\216\345\201\245/ 2023-05-08-vue-\345\233\276\346\240\207\346\227\213\350\275\254\346\224\266\350\217\234\345\215\225\346\240\217.md " "b/47\346\235\216\345\201\245/ 2023-05-08-vue-\345\233\276\346\240\207\346\227\213\350\275\254\346\224\266\350\217\234\345\215\225\346\240\217.md " new file mode 100644 index 0000000..b4134c6 --- /dev/null +++ "b/47\346\235\216\345\201\245/ 2023-05-08-vue-\345\233\276\346\240\207\346\227\213\350\275\254\346\224\266\350\217\234\345\215\225\346\240\217.md " @@ -0,0 +1,173 @@ +```vue + + + + +``` \ No newline at end of file -- Gitee From 43c2d40b87586d442ec45e8bb3cb03bf27126a04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=8C=E7=84=B6?= <2575984447@qq.com> Date: Sun, 14 May 2023 13:54:06 +0000 Subject: [PATCH 2/4] 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陌然 <2575984447@qq.com> --- ...ss\347\232\204\346\240\267\345\274\217.md" | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 "47\346\235\216\345\201\245/2023-05-09-vue-css\347\232\204\346\240\267\345\274\217.md" diff --git "a/47\346\235\216\345\201\245/2023-05-09-vue-css\347\232\204\346\240\267\345\274\217.md" "b/47\346\235\216\345\201\245/2023-05-09-vue-css\347\232\204\346\240\267\345\274\217.md" new file mode 100644 index 0000000..381eafe --- /dev/null +++ "b/47\346\235\216\345\201\245/2023-05-09-vue-css\347\232\204\346\240\267\345\274\217.md" @@ -0,0 +1,57 @@ +# Css样式 + +```vue + +``` \ No newline at end of file -- Gitee From cb329f0422dd1d4b6420e6dfc4800b997c7a7e69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=8C=E7=84=B6?= <2575984447@qq.com> Date: Sun, 14 May 2023 13:55:15 +0000 Subject: [PATCH 3/4] 111 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陌然 <2575984447@qq.com> --- ...42\345\257\274\350\210\252\346\240\217.md" | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 "47\346\235\216\345\201\245/2023-05-11-vue-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242\345\257\274\350\210\252\346\240\217.md" diff --git "a/47\346\235\216\345\201\245/2023-05-11-vue-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242\345\257\274\350\210\252\346\240\217.md" "b/47\346\235\216\345\201\245/2023-05-11-vue-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242\345\257\274\350\210\252\346\240\217.md" new file mode 100644 index 0000000..422b8c9 --- /dev/null +++ "b/47\346\235\216\345\201\245/2023-05-11-vue-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242\345\257\274\350\210\252\346\240\217.md" @@ -0,0 +1,84 @@ +# 路由数据转换成菜单栏数据 + +## 一.步骤 + ++ 1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径 + + + a. 将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径 + + + b. 定义一个空数组,用于存储处理好的路由 + + + c. 循环遍历传进的数组，处理每一个路由 + + + (1). 定义一个对象，存储需要的数据 + + + (2). 判断传传入的上级节点的路径path是否为空同时原来的路径是否为空，进行相关的处理 + + + (3). 判断是否有下级节点，递归调用converPath 函数,进行相关处理 + + + (4). 将处理好的路由插入到空的数组中 + + + d. 返回定义的存储变量 + ++ 2.排除一下主页面的路由，使其不会出现在菜单栏(请看下一个笔记) + ++ 3.返回处理好的菜单栏数据 + +```js +// 使用计算属性，将导入的路由，转换成菜单栏数据 +const menus = computed(() => { + //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径 + let list = converPath(routes, '') + + // 2.排除一下主页面的路由，使其不会出现在菜单栏 + let menuList=processHidden(list) + + // 3.返回处理好的菜单栏数据 + return menuList +}) +``` + +# +## 二.代码 +```js +//将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径 +// 暴露方法 +export function converPath(arr, parentPath) { + //定义一个空数组 + let list = []; + + // 处理每一个路由 + arr.forEach(item=>{ + + // 定义一个对象 + let tmp={ + path:item.path, + men:item.men?item.men:{title:'标题',icon:'setting'} + } + + // 当传入的上级节点的路径path不为空同时原来的路径也不为空时，就叠加 + if(parentPath && tmp.path){ + if(parentPath==='/'){ + tmp.path=parentPath+tmp.path + }else{ + tmp.path=parentPath+'/'+tmp.path + } + } + + // 判断是否有下级节点，递归调用converPath 函数 + if (item.children && item.children.length > 0) { + // 传入下级路由（是个数组），并且传入当前路由的路径 + let children=converPath(item.children,item.path) + + if(children.length>0){ + tmp.children=children + } + } + + //将处理好的路由插入到空的数组中 + list.push(tmp) + }) + + return list +} +``` \ No newline at end of file -- Gitee From 9fa29cf4a4a88db3de772f9cd3320bad624028e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=8C=E7=84=B6?= <2575984447@qq.com> Date: Sun, 14 May 2023 13:56:30 +0000 Subject: [PATCH 4/4] 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陌然 <2575984447@qq.com> --- ...7\347\224\261\350\275\254\346\215\242.md " | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 "47\346\235\216\345\201\245/ 2023-05-12-vue-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md " diff --git "a/47\346\235\216\345\201\245/ 2023-05-12-vue-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md " "b/47\346\235\216\345\201\245/ 2023-05-12-vue-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md " new file mode 100644 index 0000000..a32ed30 --- /dev/null +++ "b/47\346\235\216\345\201\245/ 2023-05-12-vue-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md " @@ -0,0 +1,75 @@ +# 排除一下主页面的路由，使其不会出现在菜单栏 + +## 步骤 + ++ 1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径(请看上个笔记) + ++ 2.排除一下主页面的路由，使其不会出现在菜单栏 + + + a. 将导入的路由中的主页从菜单栏数据排除 + + + b. 定义一个空数组,用于存储处理好的路由 + + + c. 循环遍历传进的数组，处理每一个路由 + + + (1). 定义一个对象，存储需要的数据 + + + (2). 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单 + + + (3). 判断当path为空时,进行相关的操作 + + + (4). 将处理好的路由插入到空的数组中 + + + d. 返回定义的存储变量 + + ++ 3.返回处理好的菜单栏数据 + +```js +// 使用计算属性，将导入的路由，转换成菜单栏数据 +const menus = computed(() => { + //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径 + let list = converPath(routes, '') + + // 2.排除一下主页面的路由，使其不会出现在菜单栏 + let menuList=processHidden(list) + + // 3.返回处理好的菜单栏数据 + return menuList +}) +``` + +# +## 代码 +```js +// 将导入的路由中的主页从菜单栏数据排除 +// 暴露方法 +export function processHidden(arr){ + let list=[] + + arr.forEach(item=>{ + let obj='' + + // 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单 + if(item.men && item.men.hidden && item.children && item.children.length){ + // 获取下级的第一个数据 + let children=item.children[0] + // 将数据输出 + obj=children + }else{ + // + obj=item + } + + // 判断当path为空时 + if(!obj.path){ + obj.path='/' + } + + // 将处理后的路由赋值 + list.push(obj) + }) + + return list +} +``` \ No newline at end of file -- Gitee