vue新增和编辑功能合二为一的实现

1、添加路由：

 {
	path: 'add',
	name: '添加用户信息',
	component: () => import('@/views/user/add'),
	meta: { title: '添加', icon: 'tree' }
  },
  {
	path: 'edit/:id',
	name: '修改用户信息',
	component: () =>import('@/views/user/add'),
	meta: { title: '编辑', noCache: true },
	hidden: true
  },

在上面的代码中，我们将编辑路由设置为一个隐藏路由，编辑和添加共用一个页面，点击编辑时跳转到添加页面；

2、在数据列表页面中添加编辑按钮：

3、编写前后端JS，修改时需将根据用户id将信息查出回显在编辑窗口中:

  //修改
  updateUser(user){
    return request({
      url: `/api/user/updateUser`,
      method: 'put',
      data:user
    })
    
   },
    
 //根据id查询详情
 getUser(id){
  return request({
    url: `/api/user/getUser/${id}`,
    method: 'get'
  })
  
 },

4、页面中引入方法，根据路由地址是否携带id来确定是执行添加操作还是修改操作：

但是这样帮有一个问题，在列表页面点编辑，再点击左侧菜单栏的添加，会发现添加页面各表单字段都有值，意味着页面没有被重新渲染。这是由于vue-router导航切换 时，如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，还是显示上一个路由渲染出来的组件。

解决方案：可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。

修改 src/views/layout/components/AppMain.vue 文件如下：

 取消key()函数中的注释。重新运行组件重用问题。