Vue中如何设计多级菜单才显得专业？

还有一个功能我没有列出来。反正我们看名字就大概知道每个函数的意思了。可以看到这个div其实分为两部分。上面的模板是专门用来处理只有一个孩子的。Item情况（角色管理），具体处理方法是显示子项，忽略其他。在具体执行时，可能不会只有一个孩子，也可能根本就没有孩子。在这种情况下，可以直接显示父级（参见第1.3节）。下面的el-submenu处理有多个孩子的情况（系统监控）。另外，这里涉及到一个resolvePath，也是一个特别关键的方法。让我们粗略地看一下：resolvePath(routePath,routeQuery){if(isExternal(routePath)){returnroutePath}if(isExternal(this.basePath)){returnthis.basePath}if(routeQuery){letquery=JSON.parse(路由查询);return{path:path.resolve(this.basePath,routePath),query:query}}returnpath.resolve(this.basePath,routePath)}该函数主要作用是处理菜单的路径问题。我们来看看具体的判断逻辑：如果菜单的路径是外部链接（判断逻辑是检查路径是否有http或者https等前缀），即如果isExternal返回true，则路径将原封不动地退回。如果该菜单的父菜单路径为外部链接，则原样返回父菜单路径。如果有查询参数，则添加它们。最后通过path.resolve对路径进行简单的操作。可能有些朋友对path.resolve不熟悉。简单说一下：path.resolve()方法可以将多条路径解析为规范化的绝对??路径。它的处理方式类似于对这些路径一条一条进行cd操作。但是与cd操作不同的是，这些路径可以是文件，不需要实际存在（resolve()方法不使用底层文件系统判断路径是否存在，只是进行路径字符串操作）。例如：path.resolve('foo/bar','/tmp/file/','..','a/../subfile')等同于：cdfoo/barcd/tmp/file/cd。.cda/../subfilepwd举个简单的例子：path.resolve('/foo/bar','./baz')//输出是'/foo/bar/baz'path.resolve('/foo/bar','/tmp/file/')//输出为'/tmp/file'path.resolve('wwwroot','static_files/png/','../gif/image.gif')//当前工作路径为/home/javaboy/node，输出结果为'/home/javaboy/node/wwwroot/static_files/gif/image.gif'现在大家知道菜单跳转路径是怎么来的了吧！1.3外链问题在TienChin项目中，菜单中还存在外链问题。该外部链接有两种不同的展示思路：点击外部链接直接打开新标签页，在新标签页中显示新页面。点击外部链接可以在当前项目中打开一个新的标签页，标签页中会显示新的内容。对于第一种情况，我就不给大家演示了。对于第二种情况，我截图给大家看一下：就是在当前项目的tab中显示一个外部链接的内容。我们先来看第一种情况。即点击菜单后，网页将在新标签页中打开。这个菜单的JSON格式如下：{"name":"http://www.javaboy.org","path":"http://www.javaboy.org","hidden":false,"component":"Layout","meta":{"title":"天津健身官网","icon":"guide","noCache":false,"link":"http://www.javaboy.org"}}你看，没有children，因为不需要，显示这个的时候，只当一个children，而且menuitem的路径是http路径，点击后自然跳转到新标签页。对于第二种情况，点击外部链接会在当前项目中打开一个新的标签页，标签页中会显示链接的内容。它的JSON结构类似如下：{"name":"http://www.javaboy.org","path":"/","hidden":false,"component":"Layout","meta":{"title":"天津健身官网","icon":"guide","noCache":false,"link":null},"children":[{"name":"www.javaboy.org","path":"www.javaboy.org","hidden":false,"component":"InnerLink","meta":{"title":"天津健身官网","icon":"guide","noCache":false,"link":"http://www.javaboy.org"}}]}这个其实没什么好说的。和上面系统监控的情况类似，但是只有一个子菜单。呈现菜单时，只呈现一个子菜单。由于父子菜单的路径不是以http或https等地址开头，所以这个链接最终生成的路径是/www.javaboy.org，然后这个路径的内容就会显示在InnerLink组件上，最后就是上图看到的效果了。