移動端 vue返回上一步
阿新 • • 發佈:2018-12-10
問題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;
}
}
}
這樣,當頁面處在主頁下的時候,返回鍵自動隱藏掉,如果不是當前主頁,就顯示返回鍵