ant-design-vue如何处理点击菜单时嵌套路由跳转

在ant-design-vue中，当我们点击菜单时需要嵌套路由跳转，可以使用`vue-router`进行实现。具体步骤如下：

1. 首先，在`router/index.js`文件中定义子路由，如下：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

2. 在菜单组件中，使用`router-link`标签来实现路由跳转，如下：

<template>
  <a-menu>
    <a-sub-menu :key="item.key" v-for="item in menu" :title="item.title">
      <a-menu-item :key="subItem.key" v-for="subItem in item.children">
        <router-link :to="'/detail/' + subItem.id">{{ subItem.title }}</router-link>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          key: '1',
          title: '菜单1',
          children: [
            {
              key: '1-1',
              title: '子菜单1',
              id: 1
            },
            {
              key: '1-2',
              title: '子菜单2',
              id: 2
            }
          ]
        },
        {
          key: '2',
          title: '菜单2',
          children: [
            {
              key: '2-1',
              title: '子菜单3',
              id: 3
            },
            {
              key: '2-2',
              title: '子菜单4',
              id: 4
            }
          ]
        }
      ]
    }
  }
}
</script>

3. 在详情页组件`Detail.vue`中，通过`this.$route.params.id`获取路由参数，并进行相应的处理，如下：

<template>
  <div>{{ detail }}</div>
</template>

<script>
export default {
  data() {
    return {
      detail: ''
    }
  },
  created() {
    // 通过路由参数获取详情数据
    this.detail = '详情页' + this.$route.params.id
  }
}
</script>

这样，当我们点击菜单中的子菜单时，就会跳转到对应的详情页，并且可以通过路由参数获取相应的数据。