Vue加了二级路由后,跳转后js好像都失效

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

 

posted @ 2020-07-20 06:52  hoge  阅读(971)  评论(0编辑  收藏  举报