element plust动态路由使用图标 elementui menu路由

原因：当路由地址发生变化时，想要对应的高亮显示的菜单项发生变化，只需要设置 :default-active="$route.path"即可，但是当跳转的路由(父路由)包含子路由(即包含另一个导航时)，且父路由设置了默认显示的子路由，此时父路由对应的菜单项就无法正常高亮显示，因为父路由设置了默认显示的子路由，当前路由地址就变成了子路由的地址，而菜单项高亮显示的路由对应的路由地址为父亲路由，而不是子路由所以无法高亮显示， 简单来说本来 /aaa 应该高亮显示菜单项，但现在实际的路由地址为 /aaa/bbb，所以无法高亮显示。

解决方法一：计算属性+$route.path+meta属性

① 在子路由中添加meta属性，设置需要高亮显示的路由地址

routes: [
  {
    path: '/aaa',
    component: AAA,
    redircct:'/aaa/bbb'
    children: [
      {
        path: 'bbb',
        component: BBB,
        meta: {
          activeMenu: '/aaa'
      }
    ]
  }
]

② 将default-active的值设置为计算属性

<el-menu
       class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#0e0d0a"
      unique-opened
      :router="true">
</el-menu>

③ 在计算属性中判断路由是否有meta属性，如果有则返回meta属性中设置的高亮显示的路由地址，如果没有则返回$route.path

export default {
  computed: {
    onRoutes() {
      const route = this.$route
      const { meta, path } = route
      // 在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      // meta中 有activeMenu 字段的子页面，都会显示高亮
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  }
}

方法二：非添加meta属性

将default-active的值设置为计算属性，然后在计算属性中直接判断$route.path是否是以 /xxx 开头的(/xxx 是父路由的路由地址)，如果是以 / xxx 开头的则返回对应的 /xxx ,否则返回$route.path

<el-menu
       class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#0e0d0a"
      unique-opened
      :router="true">
</el-menu>

activeMenu() {
      // 获取path地址
      const path = this.$route.path
      // 判断path地址是否是以/xxx开头的(/xxx 为对应显示的一级路由的导航的路由地址)
      if (path.startsWith('/tools')) {
        // 如果是则返回一级路由的导航的路由地址
        return '/tools'
      }
      return path
    }