zoukankan      html  css  js  c++  java
  • 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官方文档,有如下解释:

    www.beicaiduo.com
  • 相关阅读:
    C#
    C#
    C#
    创建一个ROS包
    创建一个工作空间
    ROS的文件系统
    单一职责原因
    策略模式
    UML类图
    简单工厂模式
  • 原文地址:https://www.cnblogs.com/hoge66/p/13343090.html
Copyright © 2011-2022 走看看