Vue3开发——Ant Design Vue中菜单与路由一一对应

最近在使用 Vue3 + AntD Vue 开发项目，因为也是刚刚在学习，会遇到一些简单的问题。

问题描述

路由文件写好，加载菜单数据后，点击菜单跳转到对应的路由，这里使用的是：

const router = useRouter()
router.push({ path: '/' })   // 跳转到首页

但是，问题出现了，当刷新页面时，浏览器地址栏的路由地址显示正常，但是选择的菜单已不是路由所对应的菜单了。

解决方案

先上代码：

<!-- 菜单模板 -->
<a-menu
  v-model:selectedKeys="current"
  mode="horizontal"
  @click="menuClick"
>
  <template v-for="item in menuList" :key="item.key">
    <template v-if="!item.children">
      <a-menu-item :key="item.key">
        {{ item.title }}
      </a-menu-item>
    </template>
    <template v-else>
      <a-sub-menu :key="item.key" :menu-info="item" />
    </template>
  </template>
</a-menu>

const route = useRoute()
const current = [route.path]
// 菜单数据
const menuList = [
  {
    key: '/',
    title: '首页'
  },
  {
    key: '/news',
    title: '新闻动态'
  },
]

路由代码：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/news',
    name: 'News',
    component: () => import('@/views/News.vue')
  },
]

以上就是最基本的代码，如果有二级等子菜单，模板中 a-menu 还需要加一个属性 openKeys，表示当前展开的 SubMenu 菜单项 key 数组。

为了菜单与路由一一对应，即需要保证菜单的 key 与路由的 path 保持一致。