• 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
  • 相关阅读:
    Java基础系列——IO流
    如何为网站添加 CSS 暗模式(转载)
    详解 UWP (通用 Windows 平台) 中的两种 HttpClient API
    微软微服务架构 eShopOnContainers
    web开发中使用html/css全屏铺开显示
    web开发中的Cookie
    WPF依赖属性Binding实现
    SQL Server2014安装流程及注意事项
    .Net配置文件读取及修改方法封装(未加密)
    WCF开发优秀博客园推荐
  • 原文地址:https://www.cnblogs.com/hoge66/p/13343090.html
Copyright © 2020-2023  润新知