Nuxt.js(Vue.js)でhistory backする方法

Nuxt.js(Vue.js)でhistory backする方法になります。

$router.goを使用する

Nuxt.js(Vue.js)でhistory backする際は、$router.goを使用できます。

<template>
  <div>
    <button @click="$router.go(-1)">ボタン</button>
  </div>
</template>

$router.go(-1)とすることで、一つ前に戻ることができます。

$router.goの例

// 1つレコードを進める。history.forward() と同じ
$router.go(1)

// 1つレコードを戻す。history.back() と同じ
$router.go(-1)

// 3つレコードを戻す
$router.go(-3)

methodsなどでhistory backする方法

<template>
  <div>
    <button @click="returnPage">ボタン</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  methods: {
    returnPage() {
      this.$router.go(-1)
    }
  }
})
</script>

methodsなどでhistory backする場合は、thisをつけることで使用できます。