1. 程式人生 > >移動端 vue返回上一步

移動端 vue返回上一步

問題1:如何使用點選方式控制當前頁面返回到上一個路由頁面:
在網上查閱了相關的資料,返回上一目錄用到的是 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完成監控:

watch:{
  $route(now,old){     //監控路由變換,控制返回按鈕的顯示
     if(now.path=="/home/home"){
            this.isShow=false;
     } else
{ this.isShow=true; } } }

這樣,當頁面處在主頁下的時候,返回鍵自動隱藏掉,如果不是當前主頁,就顯示返回鍵