标签：style user children lazy 代码段 rms 二级路由 task efi
1、需求，从本页打开一个编辑页面，不用弹窗；
实现思路：在路由的children中增加一个节点，用router.push 跳转，js实现；
// 路由index.js中增加的代码，见下图中带底色的代码段
children:[
{
path: ‘organizationdepartmentpage‘,
component: ()=> import("../views/organization/OrganizationDepartmentPage.vue"),
},
{
path: ‘organizationuserpage‘,
component: ()=> import("../views/organization/OrganizationUserPage.vue"),
},
{
path: ‘organizationmenupage‘,
component: ()=> import("../views/organization/OrganizationMenuPage.vue"),
},
{
path: ‘/home‘,
redirect:"/home/organizationdepartmentpage"
},
{
path: ‘/home/formDemo‘,
name: ‘复杂表单‘,
component: FormDemo
},
{
path: ‘/home/settle‘,
name: ‘新增用户‘,
//component:{template:"#childcom"},
component: ()=> import("../views/Demo/FormSettleDemo.vue"),
},
]
Vue页面中的实现：
// 模板
<el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">添加员工</el-button>
// js
// 显示员工新增界面
handleAdd: function () {
this.dataForm.deptName=‘一部‘;
console.log(this.dataForm.deptName)
this.$router.push({
path: ‘/home/settle‘,
query: {
taskId:this.dataForm.deptName,
}
})
},
以上两步实现了本页内打开编辑表单；但，问题来了；点击其他地方发现点不动了，难道是js失效？
打开chrmoe的检查发现错误：Cannot read property ‘__ob__‘ of undefined
经过百度之后，发现原因是编辑表单页面中的data{} 模块，没有加返回方法 return{};加上就好了！
<script>
export default {
name: "FormSettleDemo",
components:{
},
data(){
// 就是这句比较重要的代码，加上后js执行了
return {}
},
created(){
},
methods: {
},
}
</script>
为什么data 方法体内加上return 返回值就解决问题了呢？查看vue官方文档，有如下解释：
标签：style user children lazy 代码段 rms 二级路由 task efi
原文地址：https://www.cnblogs.com/hoge66/p/13343090.html
