vue返回上一页效果(this.$router.go、)

淡淡的烟草味﹌ 2023-06-16 07:54 97阅读 0赞

# [vue返回上一页效果(this.$router.go、)][vue_this._router.go] #

如何使用点击方式控制当前页返回到上一个路由页面：

![format_png][]

查阅相关资料，返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上，点击触发该方法；具体代码如下:

1.在当前页面添加返回按钮

<div class="backTo" v-show="isShow">
        <span v-on:click="back">返回</span>
    </div>

2.在方法体内现价back方法

methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
    },

问题2：如何控制"返回键" 的显示和隐藏：

由于这里需要频繁的改变”返回键“的显示和隐藏，所以这里考虑用v-show，

data() {
        return {
            isShow:false
        }

触发isShow 的值改变的事件应该是当前页面路由地址的改变，并且这里需要使用watch完成监控：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

watch:{
      $route(now,old){     //监控路由变换，控制返回按钮的显示
         if(now.path=="/home/home"){
                this.isShow=false;
         } else{
             this.isShow=true;
         }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

这样，当页面处在主页下的时候，返回键自动隐藏掉，如果不是当前主页，就显示返回键

vue移动端项目返回上一路由页面       [https://blog.csdn.net/u012219674/article/details/78653825][https_blog.csdn.net_u012219674_article_details_78653825]

**第二种方式：vue2.0返回上一页**

@click="$router.back(-1)"

vue2.0返回上一页    [https://blog.csdn.net/superlover\_/article/details/77950268][https_blog.csdn.net_superlover_article_details_77950268]

[vue_this._router.go]: https://www.cnblogs.com/chenguiya/p/9118265.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNTA0Mzg2LzIwMTgwNS81MDQzODYtMjAxODA1MzExODEzMjA1NzQtOTE2MTQ3NDc5LnBuZw?x-oss-process=image/format,png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg
[https_blog.csdn.net_u012219674_article_details_78653825]: https://blog.csdn.net/u012219674/article/details/78653825
[https_blog.csdn.net_superlover_article_details_77950268]: https://blog.csdn.net/superlover_/article/details/77950268