こんにちは。野中やすおです。
今回の記事では、Nuxt3でnavigateToを使用した内容を記事にしています。
navigateToとは
Nuxt.jsでは、ページ間のナビゲーションを簡単に実装するためのnavigateToというヘルパー関数が提供されています。
Nuxtでは、navigateToを使用することでルーティングを簡単にして、別のページにリダイレクトすることができます。
基本的な使用方法
|
1 |
navigateTo('/path') |
上記の例では/pathは、移動先のページのパスです。
例えば、ユーザープロフィールページに移動する場合は、/users/profileのようなパスが指定されます。
具体的な使用例
以下の例では、送信処理をonSubmitという関数で仮で実装しています。
|
1 2 3 4 5 6 7 8 9 10 |
<script lang="ts" setup> ... async function onSubmit(): Promise<void> { alert('送信') await navigateTo('/users/profile'), { open: { target: '_blank', } }) </script> |
ユーザー情報を送信した後にnavigateToを使って/users/profileのパスに遷移します。また第２引数でopenというオプションを使用して、新しいタブで開くように設定しています。
さらに詳しいオプションについては以下の公式HPをご覧ください！
