nuxt-linkで別ページの特定idの位置に飛ばしたい

Question

<nuxt-link to="../#section2">about</nuxt-link>

Nuxt.jsでwebサイトを開発しているのですが、
aboutページからindexページのsection2というidを付与しているdivの位置に飛ばしたいのですがうまくいきません。上記のコードでは 「This page could not be found」になってしまいます。
nuxt-linkで別ページに遷移後、特定idの位置に飛ばしたいのですがどのように記述したら良いのでしょうか？
そもそも下記のようにaタグで記述しても、indexページの頭に飛ぶだけでした。

<a href="http://localhost:3000#section2">about</a>
or
<a href="../#section2">about</a>

Nuxtでは普段htmlでやっていたようなことができないのでしょうか？

Answer 1

<a href="../#section2">about</a>
Nuxtでは普段htmlでやっていたようなことができないのでしょうか？

ページ移動時には、まだ Nuxt がページのコンテンツを生成していないため、ブラウザは存在しない id に移動しようとしたと判断するはずです。そのためこの方法ではうまくいきません。

<nuxt-link @click="moveAction"> などとして、後は moveAction メソッドを実装してどうにかするしかないと思います。

VueRouter の scrollBehavior をどうにかしてもできそうですが……。

Comments

[okpk]

回答ありがとうございました。
自前メソッドやrouterのフックを利用する方法で考えてみます。