element-pluls中的动态el-menu中遇到的问题

问题一：点击菜单路由没效果

el-menu中添加   router

<el-menu
    active-text-color="#f9cc4b"
    text-color="white"
    background-color="#63779c"
    class="el-menu-vertical-demo"
    router
    :collapse="isCollapse"
  >
    <el-menu-item
      v-for="item in commonRouter"
      :key="item.name"
      :index="item.path"
    >
      <component  class="icons" :is="item.meta.icon" />
      <template #title>{{ item.meta.title }}</template>
    </el-menu-item>
  </el-menu>

import { commonRouter } from "@/router/index.js";

export const commonRouter = [{
    path: "/home",
    name: "home",
    meta: {
        title: "首页",
        icon: "ElementPlus"
    },
    component: () => import("@/views/index.vue")
}, {
    path: "/profile",
    name: "profile",
    meta: {
        title: "个人中心",
        icon: "UserFilled"
    },
    component: () => import("@/views/profile/index.vue")
}, {
    path: "/user",
    name: "user",
    meta: {
        title: "用户管理",
        icon: "Avatar"
    },
    component: () => import("@/views/user/index.vue")
}]

问题二：菜单根据当前路由保持高亮，刷新丢失

在el-menu 中增加    :default-active="active"

import { useRouter } from "vue-router";
const router = useRouter();
const active=router.currentRoute.value.path;

下面是控制台输出router的结果

问题三：动态图标

<component  class="icons" :is="item.meta.icon" />