Nuxt.jsのPWAにて画面遷移時にTOPから表示されない時の対処

環境

Nuxt.js v2.3.4
mode:history

フォルダ構成

-layoutフォルダ
　　|
　　|-layouts.vue

-pagesフォルダ
　　　|
　　　|-page1.vue
　　　|
　　　|-page2.vue

事象

vue-routerでcomponent間遷移　

page1.vue

<template>
    <div id="page" class="">
        <input type="button" id="go"  @click="go">いけいけ</input>
    </div>
</template>
<script>
import CONSTANTS from '../mixin/constants.js'
import * as COMMON from '../utils/common.js'
export default {
    layout:'function',
    methods:{
        go(){
            this.$router.push('page2')
        }
    }
}
</script>
<style>
 #go{padding-top:1000px;}
</style>

page2.vue

<template>
    <div id="page" class="">
        <input type="button" id="back"  @click="go">もどれもどれ</input>
    </div>
</template>
<script>
import CONSTANTS from '../mixin/constants.js'
import * as COMMON from '../utils/common.js'
export default {
    layout:'function',
    methods:{
        back(){
            this.$router.push('page1')
        }
    }
}
</script>
<style>
 #go{padding-top:1000px;}
</style>

こうして画面遷移すると前のスクロール位置を継承して画面が表示されてしまいます。

調べてみると…２つ方法がありました

対策1

　各コンポーネントにscrollTop:trueを記述
https://ja.nuxtjs.org/api/pages-scrolltotop/

デフォルトはfalseになっており継承してしまうようです。

対策2

対策1でできなければ、nuxt.config.jsにscrollBehaviorを追加

export default {
  router: {
    scrollBehavior: function (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  }
}

これでもできませんでした…

苦肉の策で各コンポーネントにこれを追加して解決できました。

    mounted(){
        document.getElementById('対象のid').scrollTop = 0
    }

参考