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

moxiaoran5753

已于 2023-06-03 15:13:29 修改

阅读量2k

点赞数

文章标签： vue.js 数学建模前端

于 2023-05-28 14:18:24 首次发布

本文链接：https://blog.csdn.net/shenxiaomo1688/article/details/130912258

版权

文章讲述了在Vue.js应用中，如何设置隐藏路由来复用添加和编辑用户信息的组件。当点击编辑时，通过传递ID来获取用户详情并显示在编辑页面。然而，这导致了从列表页编辑后直接点击添加时，表单仍保留着之前的数据。解决这个问题的方法是在`router-view`上添加唯一`key`，强制每次路由切换时组件重新渲染。

摘要由CSDN通过智能技术生成

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、在数据列表页面中添加编辑按钮：

<router-link :to="'/user/edit/'+scope.row.id">
     <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
</router-link>

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来确定是执行添加操作还是修改操作：

<script>
import user from '@/api/user'
  export default{
    data(){
      return{
        userInfo:{}
      }
    },
    created(){
      //获取路由id值 调用接口得到信息
      if(this.$route.params && this.$route.params.id) {
         const id = this.$route.params.id
         this.getUser(id)
      }

    },
    methods:{
      saveOrUpdate(){
        if(!this.userInfo.id){ //没有id添加
          this.save()
        }else{                   //有id 修改
          this.edit()
        }
      },
	  //查询详情
      getUser(id){
        user.getUser(id)
               .then(response =>{
                this.userInfo=response.data
               })
         },
         //新增
         save(){
          user.saveUser(this.userInfo)
                .then(response => {
                  //提示
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  })
                  //添加成功后跳转到数据列表页面
                  this.$router.push({path:'/user/list'})
                }).catche(error => {

                })
         },
         //修改
         edit(){
           user.updatUser(this.userInfo)
                 .then(response => {
                   //提示
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  })
                  //添加成功后跳转到数据列表页面
                  this.$router.push({path:'/user/list'})
             })
         }
    }
  }
</script>

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

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

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

<router-view:key="key"></router-view>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  }
}
</script>

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