Arco Pro Vue项目实现左侧一级菜单栏

文章最终实现效果：

背景：

最近在用Arco Design Pro做前端项目，这套框架主要用vue3 + ES2015+ + TypeScript + Arco Design 和 echarts 等技术实现。因为之前接触vue3+ts比较少，所以做起来磕磕绊绊。下面文章为“实现左侧菜单栏为一级菜单”的办法。要是大家有更好的解决办法，欢迎补充指正。谢谢。

1. 原项目没有一级菜单的配置选项，看着像是一级菜单的两个列，实际为跳转外链菜单。不能满足目前需求

2. 首先在页面文件添加后，前往路由配置文件：src\router\routes\modules\xxx.ts。（页面对应的路由文件，我这个是system.ts）

配置格式和官方示例一样，主要增加两个设置：

关键设置：hideInMenu属性 （展示一级菜单，隐藏二级菜单）

activeMenu属性 （设置高亮为一级菜单，解决后面页面重定向时不高亮选中菜单的问题）

这样设置之后，就能在页面看到目前展示效果为一级菜单了。但是我们实际去点击菜单页面跳转后，发现页面是空白的，或者不是我们需要的。这是因为页面目前跳转的是父项路由，而实际跳转是需要到子项的。这时我们就需要用上重定向功能。

3. 前往菜单配置文件：src\components\menu\index.vue

在goto方法中，添加对应的路由判断。如果item.name(即将跳转的路由名)是我们需要设置一级菜单的父路由，那么就让他重定向到对应的子路由中。如果不是则不做变化。

这样设置之后，一级菜单功能就完成了，页面跳转、高亮也都没有问题。其它样式等具体化设置就看你们自己的需求啦！