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

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

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

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

一、业务场景

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

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

<button @click='goback'>返回</button>

  

 

  
1
 

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

  

 

  
1
  
2
  
3
  
4
 

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

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

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

  

 

  
1
  
2
 

模拟案例如下

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

  

 

  
1
  
2
 

二、拓展提升

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

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

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

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

  

 

  
1
  
2
 

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

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

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

伪代码

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

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

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

  

 

  
1
  
2
 

模拟代码

      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'
                });
            }
        }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

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

非常感谢你阅读到这里，如果这篇文章对你有帮助，希望能留下你的点赞👍 关注❤️ 分享👥 留言💬thanks！！！

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

文章来源: blessing.blog.csdn.net，作者：辰兮要努力，版权归原作者所有，如需转载，请联系作者。

原文链接：blessing.blog.csdn.net/article/details/120925344