vue如何消除點擊“返回”按鈕惱人的操作？

注：最近在做混合app開發(fā)，標題中的 “返回” 包含 瀏覽器的返回按鈕 和 手機的返回鍵。

條件：

vue項目有 Index、List、Detail 三個路由，分別對應三個同名組建，Index 有路由跳轉到 List，List 有路由跳轉到 Detail ，反過來，Detail 有返回按鈕，可以跳轉到 List，List 有返回按鈕跳轉到 Index

問題描述

按正常操作邏輯，在 Index 上點擊按鈕跳轉到 List 頁面，List 頁面點擊某條記錄跳轉到 Detail 頁面，這個時候是沒有問題的，但是當你點擊 Detail 上的返回按鈕跳轉到 List 頁面時，再通過點擊“返回”按鈕，你會發(fā)現(xiàn)又跳轉到 Detail 頁面去了——這個時候往往期望的是返回到 Index 頁面。

問題

1、該怎么處理這個操作呢？？？以便讓 app 體驗更好，求思路；
2、想實現(xiàn)一個點擊手機返回按鈕，然后提示：“再按一次退出”的功能（可能上上面關系不大，如果有思路也請?zhí)峁┫拢?/p>

謝謝！?。?/h2>

回答

編輯回答

愚念

index-》list->detail 跳轉用push
detail->list->index 用back 或者go(-1)不就好了。。。。。

關于點擊兩次退出app的，
app可以攔截到返回物理鍵的事件的，你在首頁的時候告訴app 這個頁面不允許返回到上一頁（或者說當前在首頁了），
剩下的就是app的事了，計數(shù)點擊了幾次返回按鈕之類的

2018年9月1日 08:48

編輯回答

伴謊

建議了解一下hashChange、popstate事件

2018年1月9日 08:05

編輯回答

孤影

知識點：onpopstate事件，點擊后退按鈕(或者在JavaScript中調用history.back()方法)時觸發(fā)；

代碼：

window.onpopstate = function() {  
      alert("再按一次退出")  
 };

2018年3月31日 21:55

編輯回答

歆久

跳轉的時候，router該用push的時候push,改用replace的用replace
https://www.wx2share.com/m/

我的這個，你假如在首頁點擊“品牌”分類，是通過router.push 進入一個列表頁面，同時這個列表可以通過tab進行切換，你可以看到瀏覽器地址里的url也是在變化的，但是這是我用的方式是router.replace 可以保證在按返回按鈕的時候，不在列表頁多次展示，再次點先一個列表項進入詳情頁，
你可以嘗試，只要進入了詳情頁，無論你在列表頁有多少次 tab的切換，回退的首頁，只需要按兩次后退銨鈕

所以，你的問題也一樣，就是要解決好 router 中的histroy的問題

2018年5月2日 00:36