前端开发 =》Vue中qwer一套带走
stormMoonlet
共 7181字，需浏览 15分钟
·
2021-08-09 10:48
添加操作
定义api模块
//添加
saveHospSet(hospitalSet){
return request({
url: `/admin/hosp/hospitalSet/saveHospitalSet`,
method: 'post',
data: hospitalSet
})
},
定义组件模板
<el-form label-width="120px">
<el-form-item label="名称">
<el-input v-model="hospitalSet.hosname"/>
</el-form-item>
<el-form-item label="编号">
<el-input v-model="hospitalSet.hoscode"/>
</el-form-item>
<el-form-item label="api基础路径">
<el-input v-model="hospitalSet.apiUrl"/>
</el-form-item>
<el-form-item label="联系人姓名">
<el-input v-model="hospitalSet.contactsName"/>
</el-form-item>
<el-form-item label="联系人手机">
<el-input v-model="hospitalSet.contactsPhone"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveOrUpdate">保存</el-button>
</el-form-item>
</el-form>
定义组件脚本
save(){
hospset.saveHospSet(this.hospitalSet)
.then(response =>{
this.$message({
type: 'success',
message: '添加成功!'
});
//跳转列表页面，使用路由跳转方式实现
this.$router.push({path:'/hospSet/list'})
})
},
更新操作
定义api模块
//根据id查询
getHospSet(id){
return request({
url: `/admin/hosp/hospitalSet/getHospSet/${id}`,
method: 'get'
})
},
//更新数据
updateHospSet(hospitalSet){
return request({
url: `/admin/hosp/hospitalSet/updateHospitalSet`,
method: 'post',
data: hospitalSet
})
},
组件模板 =》编辑按钮
<router-link :to="'/hospSet/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
添加路由
{
path: 'edit/:id', //传入编辑的id值
name: '编辑',
component: () => import('@/views/hospset/add'), //编辑页面和添加页面共用一个组件
meta: { title: '编辑', noCache: true },
hidden: true //设置为隐藏
}
编辑回显数据
因为是共用同一个组件，所以可以获取跳转过来首先判断路由中id中是否为有值（前提是在页面加载前判断）
data () {
return {
hospitalSet :{}
}
},
created () {
//获取路由id值 调用接口得到设置信息
if(this.$route.params && this.$route.params.id) {
const id = this.$route.params.id
this.getHospSet(id) //通过id调用后端接口，显示到页面中
}else{
this.hospitalSet = {}; //id为空说明是添加操作，需要清空表单中的数据，通过双向绑定实现
}
}
调用方法
getHospSet(id){
hospset.getHospSet(id)
.then(response =>{
this.hospitalSet = response.data; //把查询出来的数据，通过双向绑定显示到表单中
})
}
组件模板中保存
update(){
hospset.updateHospSet(this.hospitalSet)
.then(response =>{
this.$message({
type: 'success',
message: '修改成功!'
});
//跳转列表页面，使用路由跳转方式实现
this.$router.push({path:'/hospSet/list'})
})
},
//添加
saveOrUpdate(){
if(!this.hospitalSet.id){ //判断是有存在id值
this.save();
}else{
this.update();
}
}
组件重用问题
问题：vue-router导航切换 时，如果两个路由都渲染同个组件， 组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建
解决方案：可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。
编辑 src/views/layout/components/AppMain.vue
评论