vue3在父路由下动态新增子路由（新增需要打开新标签页）

记录下问题：

我的路由是通过后台查询菜单表返回，前端新增需要以新标签的方式打开新增内容。我们不可能在数据库添加新增按钮的菜单，所以需要前端动态在父路由下新增子路由

---

效果：

图1

图2

---

代码：

api：addRoute(parentName: string, route: RouteConfig): () => void
参数：父路由实例名称、新增路由对象
说明：SaleManagement是我父组件实例名称

//新增
const handleAdd = () => {
   router.addRoute('SaleManagement', {
     path: '/sale/opportunity/edit',
     name: 'Edit',
     meta: { title: '销售商机-新增' },
     component: () => import('./edit'),
   })
   //跳转到新增得路由
   router.push({
     path: 'opportunity/edit',
   })
 }

注意：父实例名必须要正确，不然就会添加到根路由，导致最外层显示组件

如果对你有帮助，可以点个咱，谢谢！！！

---