nuxt-link 関数が終了した後にページ遷移する

Question

前提・実現したいこと

<nuxt-link> でページ遷移する前に関数を実行したいと考えてます。

該当のソースコード

<templete>
 <nuxt-link
   :to="{ path: link }"
   @click.native="beforeLogin"
   no-prefetch
   >
   Login
  </nuxt-link>
</templete>

・・・

 methids: {
　　async login() {
    await setTimeout(() => {
     this.link = '/login'
    }, 10000)
   }
　}

・・・

試したこと

実際は違う関数が入るのですがtimeoutを使って10秒後に遷移するようにしてみたのですがうまく行きません。

ある関数を終了させた際にページ繊維するためにはどうしたら良いでしょうか？
よろしくお願いします。

Answer 1

プログラム的な遷移にされてはどうですか？
nuxt-linkで実行しているのはvue-routerのpushですので、それを手動で動かすことでご希望の動作は可能かと思います。

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

<script>
export default {
  methods: {
    async customRouterPush() {
      await hogeFunction()
      this.$router.push('/path/')
    }
  }
}
</script>

Comments

[gnx_vw903]

ご回答ありがとうございます！試してみます！

[gnx_vw903]

methodsにhogeFunctionを追加して試したのですが
「ReferenceError: hogeFunction is not defined」というエラーが出てしまいます
関数はmethodsの中に配置で間違い無いでしょうか？

[nt4c]

hogeFunctionはダミーで差し込んだ関数です。
行いたい処理は適宜ご自身のコードに合わせて差し込んでください。
この回答で示してるのはメソッドからrouter.push()による遷移を行っていることです。

[gnx_vw903]

ありがとうございます！
名前をhogefunction()としていただけで関数の中身は自分が行いたい処理を入れておりました。
methodsの関数のなかで他の関数を呼び出すとに何か特別なこと必要ですか？

[gnx_vw903]

this.hogefunction()としたら上手く行きました！ありがとうございます！

Answer 2

実際は違う関数が入るのですがtimeoutを使って10秒後に遷移するようにしてみたのですがうまく行きません。

setTimeoutはPromiseを返しませんので、そのままではawaitしても待たせられません。

あと、nuxt-linkがasync-awaitを認識するのかも要確認です。

Comments

[gnx_vw903]

ありがとございます。もう少し調べてみます！

[gnx_vw903]

@maisumakun async-awaitしなさそうなので、関数終了後に遷移するのは無理そうですかね、、

[maisumakun]

プログラムから遷移動作をさせられるなら、デフォルトの遷移はキャンセルして、関数の済んだ時点で遷移動作をコードで起こす、というような方法もあるかもしれません。

[gnx_vw903]

ありがとうございます！
プログラムから遷移動作をさせられるか試してみます！