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