javascript - vue 中如何判断返回操作（包括浏览器的返回按钮）？

Question

我的需求：

• 先从列表=>详情页
• 如果在详情页点击的返回按钮，则读取之前缓存的历史数据

（在详情页刷新后再点击返回，也符合条件）

此时的返回包括：

• 浏览器的返回按钮
• 页面中的按钮（调用router.back()/go(-1)等路由方法）

要如何全局判断用户进行了返回操作呢？

Answer 1

你需要的是类似于App开发中的 页面栈，传统的网页开发中没有这个概念，可以尝试采用以下插件实现：

• vue-page-stack
• stack-keep-alive

Answer 2

用Vuex：
详情页:

beforeRouteLeave(to, from, next) {  if (this.$store.state.refreshed) {    this.$store.commit('setRefreshed', false);  }  next();}

列表页:

beforeRouteEnter(to, from, next) {  if (from.path === '/details' && this.$store.state.refreshed) {    // 读取缓存数据  } else {    // 重新获取数据  }  next();}

最后，在详情页的刷新按钮的点击事件里，把 refreshed 设置成 true。

methods: {  refresh() {    this.$store.commit('setRefreshed', true);    // 刷新详情页  }}