vue如何消除点击“返回”按钮恼人的操作？

Question

注：最近在做混合app开发，标题中的 “返回” 包含 浏览器的返回按钮 和 手机的返回键。

条件：

vue项目有 Index、List、Detail 三个路由，分别对应三个同名组建，Index 有 路由 跳转到 List，List 有路由跳转到 Detail ，反过来，Detail 有返回按钮，可以跳转到 List，List 有返回按钮跳转到 Index

问题描述

按正常操作逻辑，在 Index 上点击按钮跳转到 List 页面，List 页面点击某条记录跳转到 Detail 页面，这个时候是没有问题的，但是当你点击 Detail 上的返回按钮 跳转到 List 页面时，再通过点击“返回”按钮，你会发现又跳转到 Detail 页面去了——这个时候往往期望的是返回到 Index 页面。

问题

1、该怎么处理这个操作呢？？？ 以便让 app 体验更好，求思路；
2、想实现一个点击手机返回按钮，然后提示：“再按一次退出”的功能（可能上上面关系不大，如果有思路也请提供下）

谢谢！！！

Answer 1

建议了解一下hashChange、popstate事件

Answer 2

知识点：onpopstate事件，点击后退按钮(或者在JavaScript中调用history.back()方法)时触发；

代码：

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

Answer 3

跳转的时候，router该用push的时候push,改用replace的用replace
https://www.wx2share.com/m/

我的这个，你假如在首页 点击“品牌”分类，是通过router.push 进入一个列表页面，同时这个列表可以通过tab进行切换，你可以看到浏览器地址里的url也是在变化的，但是这是我用的方式是router.replace 可以保证在按返回按钮的时候，不在列表页多次展示，再次点先一个列表项 进入详情页，
你可以尝试，只要进入了详情页，无论你在列表页有多少次 tab的切换，回退的首页，只需要按两次后退铵钮

所以，你的问题也一样，就是要解决好 router 中的histroy的问题

Answer 4

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

关于点击两次退出app的，
app可以拦截到返回物理键的事件的，你在首页的时候 告诉app 这个页面不允许返回到上一页（或者说当前在首页了），
剩下的就是app的事了，计数点击了几次返回按钮之类的