Vue Academy · レッスン

Vue Routerの設定

Q: 「Vue Routerの設定」で何を学びますか？

Vue Routerをインストールし、最初のルートを定義します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Routerをインストールし、最初のルートを定義します

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

Vue Routerとは

Vue Routerは、Vueの公式ルーティングライブラリです。

URLをコンポーネントに対応付けます
ページ全体を再読み込みせずにシングルページナビゲーションを実現します
履歴、リンク、パラメーターを管理します

Vue Routerのインストール

npmを使ってプロジェクトにVue Routerを追加します。

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

ルートコンポーネントの作成

各ルートは1つのコンポーネントを表示します。まずは単純なページコンポーネントから始めます。

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

routes配列の定義

routes配列で、パスとコンポーネントを対応付けます。

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

createRouter関数は、ルートと履歴モードからルーターを作成します。

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

createWebHistoryはHTML5 History APIを使用し、/aboutのような見やすいURLを実現します。

URLにハッシュが付きません
ディープリンクを機能させるにはサーバー設定が必要です
別の方法としてcreateWebHashHistory（/#/about）があります

ルーターの登録

app.useを使って、アプリにルーターをインストールします。

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

router-view

router-viewコンポーネントは、マッチしたルートコンポーネントが表示される場所です。

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

ナビゲーションには通常のアンカータグではなくrouter-linkを使用します。ページ全体の再読み込みを回避できます。

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

アクティブなリンクのスタイル設定

router-linkは、アクティブなリンクにCSSクラスを自動的に追加します。

部分一致にはrouter-link-activeを使用します
完全一致にはrouter-link-exact-activeを使用します

これらのクラスにスタイルを設定して、現在のページを強調表示します。

全体を組み立てる

一連の流れは次のとおりです。

パスとコンポーネントを対応付けるルートを定義します
createRouterとcreateWebHistoryでルーターを作成します
app.use(router)で登録します
router-viewを配置し、router-linkで移動します

理解度チェック

Vue Routerの設定についての理解度を確認します。

まとめ: Vue Routerの設定

クライアントサイドルーティングを設定しました。

npm install vue-routerでインストールします
routes配列を定義します
createWebHistoryを使ってcreateRouterを作成します
app.use(router)で登録します
router-viewとrouter-linkを使用します

次はネストされたルートと動的ルートです。

よくある質問

「Vue Routerの設定」レッスンは無料ですか？

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

「Vue Routerの設定」で何を学びますか？

Vue Routerをインストールし、最初のルートを定義しますブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Vue Routerの設定」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る