vue 同级页面跳转,查询和返回

时间:2024-04-05 19:23:59

当一个列表中需要跳转同级页面时,原型是这样的vue 同级页面跳转,查询和返回
点击查询分配比例按钮,需要跳转到同级页面的,可以说是这条数据详情里面去,
vue 同级页面跳转,查询和返回
看到网上各种方法,但是可能是因为是初学者,一个都没有实验成功,最后做出来是这样的,附上代码
vue 同级页面跳转,查询和返回
首先,先写两个模块,即第一个主页面,和需要跳转的页面,包裹两个div,
第一个div中写入 v-if=“loginType === 'query” 此处参考https://www.cnblogs.com/zsy/p/6492588.html
在第二个div中写入 v-else 连个div之间不能有其他的标签,不然识别不出来。
vue 同级页面跳转,查询和返回
vue 同级页面跳转,查询和返回
这个是我的跳转按钮,
这样 template里面就写完了
再 return 中加入
说实话,我也不知道这个有没有用,反正就加上去了。
vue 同级页面跳转,查询和返回

 ViewDetails(data){                                     
                console.log('this.Id', data.Id)
                this.Id =data.Id;
                this.Code = data.Code;
                if(this.loginType=='query'){
                this.loginType='back';                               
                    this.Proportions()
                }
                else{
                    this.loginType='query'
                }
            },
            Back(){                                          
                if(this.loginType=='back'){
                    this.loginType='query';
                    this.toDoSearch()
                }
                else{
                    this.loginType='back'
                }
            },

我的需要传的是ID 和 code 根据个人情况

this.Proportions() 、 this.toDoSearch()、是我的查询功能

vue 同级页面跳转,查询和返回

this.toDoSearch()

就是主页面的查询功能 返回的时候查询主页面的查询功能和接口

最后结果

vue 同级页面跳转,查询和返回

vue 同级页面跳转,查询和返回
Id传入了vue 同级页面跳转,查询和返回
这样就好了。
反正到现在我也不知道兄弟组件是咋弄的。

以上为个人学习记录。