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官方文档,有如下解释: