1. 程式人生 > >vue移動端專案中返回上一路由頁面、根據當前路由資訊控制返回鍵的顯示與隱藏

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

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

相關推薦

vue移動專案返回路由頁面根據當前路由資訊控制返回顯示隱藏

最近在做一個小型的vue移動端專案(自己練手),遇到的兩個問題記錄一下: 問題1:如何使用點選方式控制當前頁面返回到上一個路由頁面:  在網上查閱了相關的資料,返回上一目錄用到的是 this.$router.go(-1); 將該方法些到返回按鈕上,點選觸發該方法;具體程

vue移動專案使用rem佈局簡易教程

rem佈局由於其根據螢幕寬度的改變修改相應的rem與px的轉換比例,這樣非常適合移動端的專案。 在不同的解析度下,都會有較好的顯示效果。 在使用rem佈局的時候需要引入flexible.js。 js會根據螢幕的寬度計算html的根字型大小 在vue專案中只需要安裝ra

Vue移動專案中下拉重新整理和拉載入

Vue2.0中引入Mint-UI的下拉重新整理和上拉載入。簡單粗暴 安裝Mint-UI npm i mint-ui -S 引入 開啟專案的main.js入口檔案,引入並使用。注意,為了方便,這裡是全部引入,專案中想節省體積的話,可以按照官網的方法,按需引入。傳送門 impor

微信蘋果h5頁面用window.history.go(-1)返回頁面不會重新載入/重新整理

微信中h5頁面用window.history.go(-1)返回上一頁頁面不會重新載入問題 問題描述:     在實際開發中遇到這樣一個問題,業務需求涉及到返回上一頁問題,第一時間想到了window.history.go(-1)方法,這樣做本身沒有任何問題,但是在微信中,安卓手機還好返回上一頁

vue移動專案,螢幕適配方法,rem

親測有效,大家可以試試。 使用的是vue-cli搭建的webpack專案,然後按步驟一步一步走下去就成功了 1.終端中輸入 npm i lib-flexible --save 2.終端中輸入 npm i px2rem-loader --save-dev 3.在專案

vue移動專案基礎框架搭建

本文章,主要提供vue移動端專案基礎框架搭建思路,每個獨立的模組網上有很多相關的文件。 移動端vue專案基礎框架搭建,主要包括6個步驟 專案使用的腳手架vue-cli搭建模板,2、使用淘寶lib-flexible搭配rem實現頁面的自適應佈局,為了方便程式碼編寫使用rpx2rem轉化px,使

Vue移動專案如何使用手機預覽除錯

  最近在開發移動端Vue移動端專案,查了一些資料,這裡分享下如何在webpack工具構建下的vue專案,在手機端除錯和預覽,言歸正傳。 1.電腦和手機連線到同一個WIFI a.臺式電腦和手機同時連結一個路由器,使用同一個wifi; 

vue 移動專案rem佈局

以上實現轉換適用於: (1)元件中編寫的<style></style>下的css (2)從index.js或者main.js中import ‘../../static/css/reset.css’引入css (3)在元件的<script type=”text/ec

vue移動專案部署之後,第一次載入頁面的時候過慢

vue移動端專案部署之後,第一次載入頁面的時候過慢,不一定非得首頁載入慢,直接訪問某個元件載入速度很慢的解決方案 vue按需載入

vue+element ui專案總結點()selectCascader級聯選擇器encodeURIdecodeURI轉碼解碼一級mockjs用法路由懶載入三種方式

不多說上程式碼: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI簡單Cascader級聯選擇器使用</p> <

Linux小技巧-返回次目錄及一些control快捷

1、Linux回到上一次目錄 cd -     -  ==  $OLDPWD 可以 echo $OLDPWD檢視 cd -   ==   cd $OLDPWD   一不小心輸入cd 直接回車就會跑

微信返回頁面引數丟失

做微信公眾號開發的時候,遇到一個很糾結的問題。跳轉到某些頁面之後,用微信自帶的返回鍵返回上一頁,會報錯,值返回空頁面。經檢查之後,發現,是在返回過程中,上一頁的引數丟失了。比方說,從A頁面 a?x=1&y=2,跳轉到B頁面b?z=3,然後用微信自帶的返回按鍵返回到A,

HTML返回頁面

超連結返回上一頁程式碼: <!-- javascirpt :可以不寫 ,href裡的內容自定義--> <a href=”#” onClick=”javascript :history.back(1);”>返回上一頁</a> <

移動 vue返回

問題1:如何使用點選方式控制當前頁面返回到上一個路由頁面: 在網上查閱了相關的資料,返回上一目錄用到的是 this.$router.go(-1); 將該方法些到返回按鈕上,點選觸發該方法;具體程式碼如下: 1.在當前頁面新增返回按鈕 <!--返

Vue項目返回

上一頁 jquer 不同 返回 this jquery col ron 頁面 由於Vue不同於jQuery等多頁面應用的項目,它是單頁面應用,如果還是使用jQuery中的go(-1)或back()是行不通的,所以: 1、如果使用了Vue-router的話,就可以用this.

解決移動返回頁面,重新整理問題

通常可以用到window.history.back(); window.history.go(-1);返回重新整理上一頁, 但當兩種方法都不滿足你的開發需求的時候,可以採用以下的方法。 從a頁面,跳轉到b頁面,b頁面的資料操作,會影響a頁面的展示。那麼在b頁面裡就可以使用,sessionStorage.set

js倒計時60秒。vue 更新陣列。vue js。html 返回頁。vue h3 顯示不出來。vue 標籤內容顯示不出來。

js倒計時60秒==html 返回上一頁onclick=”javascript:history.back(-1);javascript :history.go(-1)==vue h3 顯示不出來vue 標籤內容顯示不出來檢視css樣式,尤其是全域性的, 應該設定了字型大小0,

關於網頁返回頁並重新整理的問題(C#WebForm移動

昨天碼程式碼時遇到一個問題,history.back()或go(x)、forward()之後,呼叫重新整理location.reload()方法,怎麼也跳轉不到上一個頁面。在此處寫出昨天產生的一些疑問以及自己的一些理解,希望大家能夠給出合理的指點,謝謝。實際需求為:完成一個選

vue 移動禁用安卓手機返回

ops tlist list 復制 win htm pop state add //禁止手機返回鍵 下面這段代碼直接復制在index.html中,可以生效// $(document).ready(function() {   if (wi

使用Vue開發移動專案初始化需要

1、增加移動端適配標籤| <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 2、將r