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官方文件，有如下解釋：