【vue项目】this.$router.go(-1)返回跳转到系统首页(问题解决)

【vue项目】this.$router.go(-1)返回跳转到系统首页(问题解决),第1张

【vue项目】this.$router.go(-1)返回跳转到系统首页(问题解决)

【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!

博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步!

吾等采石之人,应怀大教堂之心,愿大家奔赴在各自的热爱里…

文章目录
      • 一、业务场景
      • 二、拓展提升


一、业务场景

hello本期简单总结一下vue项目中遇到的点击返回按钮跳首页问题

业务场景:如上按钮附上 this.$router.go(-1)方法,本地运行点击返回正常返回前一页,页面到具体的系统后,点击返回直接跳转到首页


 //返回前一页
  goback(){
             this.$router.go(-1)
            }

问题产生的原因:当前系统或者平台前端禁用了返回按钮


解决办法:使用路由跳转,返回到什么页面就写指定的路由

1.先去定义路由的页面配置好当前页面的路由
2.如上this.$router.go(-1)切换成this.$router.push('/跳转页面')

模拟案例如下

  //跳到指定页面 这里是根据路由跳转
this.$router.push('/home')

二、拓展提升

我之前遇到过一个业务场景

如有三个页面共用一个页面,公共页面上点击返回按钮的时候如何跳转到指定页面,即跳转到前一个进入的页面

显然这里不能直接把返回的页面路由写死

//跳到指定页面 这里是根据路由跳转
this.$router.push('/home')

解决办法:每一个页面进来的时候我们额外的带一个参数或者属性,如1/2/3

我们将对应的参数存储在公共的页面

当我们返回的时候根据指定的参数 即可以判断返回到不同页面


伪代码

       // 跳转到下一个页面 同时传入对应的参数
        goFilepage(row) {
            //路由跳转
            this.$router.push({
                name: 'home',
                params: {
                    sId: row.sId,
                    backPage: 1 (或者/2/3 此处灵活变通)
                }
            });
        }

前一个页面传入的参数存储在当前页面,供返回时候使用

  //传入前一个页面的标识符,存在当前的页面
  this.backPage = this.$route.params.backPage;

模拟代码

      goBack() {  
            //路由跳转
            if (this.backPage === 1) {
                this.$router.push({
                    name: 'a'
                });
            } else if (this.backPage === 2) {
                this.$router.push({
                    name: 'b'
                });
            } else if (this.backPage === 3) {
                this.$router.push({
                    name: 'c'
                });
            } else {
                this.$message({
                    showClose: true,
                    message: '错误',
                    type: 'error'
                });
            }
        }

好了本期就总结到这里了,vue基础分享,后续继续带来更多项目总结


非常感谢你阅读到这里,如果这篇文章对你有帮助,希望能留下你的点赞 关注❤️ 分享 留言thanks!!!

2021年10月23日19:55:29 愿你们奔赴在自己的热爱里!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4748422.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-09
下一篇 2022-11-08

发表评论

登录后才能评论

评论列表(0条)

保存