0Pricing
Vue Academy · レッスン

プログラムによるナビゲーションとuseRouter

router.push()、router.replace()、router.go()、useRouter()とuseRoute()のComposable

「プログラムによるナビゲーションとuseRouter」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

コードからナビゲーションする

RouterLink 以外にも、フォーム送信やログインの後など、JavaScript からナビゲーションすることがよくあります。useRouter コンポーザブルを使うと、ナビゲーションに使用するルーターインスタンスを取得できます。

ルーターを取得する

<script setup> 内で useRouter() を呼び出します。返されるオブジェクトには、push、replace、go などが公開されています。

import { useRouter } from 'vue-router'
const router = useRouter()

push でナビゲーションする

router.push はリンクをクリックした場合と同じように、履歴スタックにエントリを追加します。最も簡単な形式では、パス文字列を渡します。

router.push('/dashboard')

ルートオブジェクトを使って push する

name、params、query を含むオブジェクトを渡すこともできます。名前付きルートを使うと、パスをハードコードせずに済みます。

router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})

replace：履歴エントリを追加しない

router.replace は履歴に追加せずにナビゲーションするため、戻るボタンでそのページがスキップされます。ログイン後に使用すると、ユーザーがログインページへ戻れないようにできます。

router.replace('/dashboard')

戻る・進む操作を行う

router.go(n) は、n ステップ分、履歴を移動します。router.go(-1) は 1 ページ戻り、router.go(1) は 1 ページ進みます。

function goBack() {
  router.go(-1)
}

非同期アクションの後に実行する

典型的な流れは、フォームを送信し、結果を await してからナビゲーションすることです。push は完了を待機できる Promise を返します。

async function login() {
  await auth.signIn(form)
  router.push('/dashboard')
}

現在のルートを読み取る

現在のルートの params と query を読み取るには、useRoute コンポーザブルを使用します。useRouter と混同しないでください。useRoute はルート、useRouter はナビゲーターです。

import { useRoute } from 'vue-router'
const route = useRoute()

パラメーターにアクセスする

route.params を通じて動的セグメントを読み取ります。/user/:id というルートの場合、id は route.params.id にあります。

const userId = route.params.id

クエリ文字列にアクセスする

route.query を通じてクエリ文字列を読み取ります。?tab=profile の場合は、route.query.tab を使用します。

const tab = route.query.tab

パラメーターの変更に反応する

route はリアクティブなので、同じコンポーネントにとどまったまま params が変化したときに反応するには、watch します。

import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

理解度チェック

プログラムによるナビゲーションについての知識を確認します。

まとめ

プログラムによるナビゲーションを学びました。

  • useRouter() から push、replace、go を取得できます。
  • push は履歴に追加し、replace は追加しません。go(-1) で戻ります。
  • push にはパス文字列、または { name, params, query } オブジェクトを渡せます。
  • useRoute() で現在の params と query を読み取れます。これらはリアクティブです。

よくある質問

「プログラムによるナビゲーションとuseRouter」レッスンは無料ですか？

はい。「プログラムによるナビゲーションとuseRouter」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「プログラムによるナビゲーションとuseRouter」で何を学びますか？

router.push()、router.replace()、router.go()、useRouter()とuseRoute()のComposable ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「プログラムによるナビゲーションとuseRouter」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ルートメタフィールドと型付け
  2. ルート遷移とアニメーション
  3. スクロール動作の設定
  4. プログラムによるナビゲーションとuseRouter
← Vue Academyに戻る