vue3+antd+a-menu配置

antd是用的3+版本

<a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="toPage">
  <template v-for="i in menus">
    <a-menu-item v-if="!i.children" :key="i.path">
      <span>{{ i.name }}</span>
    </a-menu-item>
    <a-sub-menu v-else :key="i.path">
      <template #title>
          <span>
            {{i.name}}
          </span>
      </template>
      <a-menu-item v-for="item in i.children" :key="item.path">
        {{item.name}}
      </a-menu-item>
    </a-sub-menu>
  </template>
</a-menu>

import { ref,onMounted } from 'vue';
import {menus} from '@/apis/api/nav.ts'
import { useRouter,useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const selectedKeys = ref<string[]>(['/index']);

const toPage = (e:any) => {
  if(e.key!=route.path){
    router.push({
      path: e.key
    })
  }
}

onMounted(()=>{
  router.push({
    path: '/index'
  })
})

nav.ts的配置

export const menus = [
{
    name:'首页',
    path:'/index',
    key:'1'
},
{
   name:'运营管理',
   path:'',
   key:'6',
   children:[
       {
           name:'用户反馈管理',
           path:'/feedback'
       }
   ]
},
]