[TOC]
观察项⽬演示发现，添加菜单和编辑菜单的组件结构⼏乎相同，可以封装为组件进⾏复⽤。 创建 menu/components/create-or-edit.vue 组件 将 menu/create.vue 内容复制到 create-or-edit.vue 中 更改 name create-or-edit 组件通过 prop 接收⽗组件数据 isEdit 来判断要展示哪种结构

标题判断处理（其余功能后续处理）

// menu/components/create-or-edit.vue

去除 create.vue 中的多余内容

根元素内的所有结构 data、created、methods 所有内容 // menu/create.vue

引⼊ create-or-edit 组件，并进⾏处理。

创建 menu/edit.vue 组件，并设置内容。

// menu/edit.vue

将菜单编辑添加到路由表中。

由于编辑为某个菜单的编辑，应设置动态路由展示菜单项id 因为功能相近，可以将菜单添加和编辑路由的 chunkname 设置为相同值，这样合并在⼀个包中。（按需） // router/index.js … { path: ‘/menu/:id/edit’, name: ‘menu-edit’, component: () => import(/ webpackChunkName: ‘menu-edit’ /‘@/ views/menu/edit’) } ] …

给 menu/index.vue 中的编辑按钮设置点击后的路由跳转

// menu/index.vue