vue-routerの戻るボタンを押してback()した時は処理を変えたい

目的

<keep-alive /> やvuexを使った場合、ブラウザのメモリ上にデータが残る
これらの機能を使った一覧画面の場合、

• 過去データをそのまま表示するか？
• サーバーに再検索するか？

の判断が必要になるケースが稀にある。

例えば、戻るボタン、backで画面遷移したい場合は過去の検索結果のデータを表示し、
メニュー等、他からの画面遷移なら再検索させたい場合がこれにあたる

案

vuer-router経由で読み込むPage Componetに対して、
共通でextendsするcomponentとして下記を定義する

export default {
  name: 'base-page',
  beforeRouteLeave(to, from, next) {
    if (this.backing) to.params.isBack = true
    this.backing = false
    next()
  },
  data() {
    return {
      backing: false,
    }
  },
  computed: {
    isBack() {
      return this.$route && this.$route.params.isBack
    },
  },
  methods: {
    backPage() {
      this.backing = true
      this.$router.back()
    },
  },
}

一覧ページなどの戻るボタンで戻るページでは下記のように処理分岐する

<script>
import BasePage from '../base-page.js'

export default {
  extends: BasePage,
  beforeRouteEnter: function () {
    if (this.isBack) {
      // 戻るボタン経由の場合
    } else {
      // それ以外の場合
    }
  },
}
</script>

戻るボタンでは、backPageメソッドを呼び出す。
もしくは、ブラウザのback eventを監視し、backPageメソッドと同様の処理を行わせる