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

2021-01-18 18:17

阅读：471

标签：style user children lazy 代码段 rms 二级路由 task efi

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页面中的实现：

 // 模板
添加员工

// 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{};加上就好了！

　　为什么data 方法体内加上return 返回值就解决问题了呢？查看vue官方文档，有如下解释：

技术图片

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

标签：style user children lazy 代码段 rms 二级路由 task efi

原文地址：https://www.cnblogs.com/hoge66/p/13343090.html

上一篇：Web优化躬行记（1）——CSS

下一篇：前端MVC

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Vue加了二级路由后，跳转后js好像都失效
文章链接：http://soscw.com/index.php/essay/43761.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章