VueJS - ルーティング：Vueアプリケーションをナビゲートするための初心者向けガイド

こんにちは、未来のVueマスターさんたち！今日は、Vueのルーティングの世界に一緒に飛び込みます。ルーティングをアプリケーションのGPSと考えてください - これにより、ユーザーはページからページへリロードすることなく移動できるようになります。すごいですね？それでは、始めましょう！

Vueルーティングとは？

家（あなたのVueアプリ）を建てているとしましょう。ゲストが違う部屋に行くたびに窓から入ることを望まないでしょうよね？そこでルーティングが登場します - これは、アプリの部屋間の適切なドアを作るようなものです。

Vue RouterはVue.jsの公式ルーティングライブラリです。これにより、コンポーネントを異なるURLパスにマッピングし、スムーズなシングルページアプリケーション体験を提供します。

Vue Routerの設定

まず第一に、Vue Routerをインストールしましょう。ターミナルを開き、以下のコマンドを実行します：

npm install vue-router

次に、基本的なルーターセットアップを作成しましょう：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
routes
})

export default router

このセットアップでは、VueとVueRouterをインポートし、VueにVueRouterを使用することを伝えます。ルートを配列で定義し、各ルートはパス、名前、レンダリングするコンポーネントを指定するオブジェクトです。

Router-LinkとRouter-Viewの使用

ルートを設定したら、どのように使用するのでしょうか？<router-link>と<router-view>が登場します。

Router-Link

<router-link>はユーザーがページ間をナビゲートするためのコンポーネントで、強化された<a>タグのようです。以下のように使用します：

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>

Router-View

<router-view>は魔法が起こる場所です。これは、現在のURLに一致するルートのコンテンツを表示するコンポーネントです。コンポーネントがレンダリングされるプレースホルダーと考えてください。

Router-LinkのProps

Router-Linkには、その動作をカスタマイズできるいくつかのPropsがあります。以下に最も一般的なものを見てみましょう：

Prop	説明	例
to	目標ルートを指定	<router-link to="/about">About</router-link>
replace	新しい履歴エントリをプッシュせずにナビゲート	<router-link to="/about" replace>About</router-link>
append	現在のパスにパスを追加	<router-link to="child" append>Child</router-link>
tag	レンダリングするタグを指定	<router-link to="/about" tag="li">About</router-link>
active-class	リンクがアクティブなときに適用されるクラス	<router-link to="/about" active-class="active">About</router-link>
exact	正確にルートを一致させる	<router-link to="/" exact>Home</router-link>

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

時折、JavaScriptコード内部からナビゲートしたい場合があります。Vue Routerはこのためのメソッドを提供しています：

// Aboutページに移動
this.$router.push('/about')

// 戻る
this.$router.go(-1)

// 現在の履歴エントリを置き換える
this.$router.replace('/about')

ドナミックルートマッチング

しばしば、同じコンポーネント αλλά異なるパラメータを持つルートをマッピングする必要があります。例えば、ユーザーIDがURLの一部であるユーザープロファイルページ。これはパスのドナミックセグメントを使用して実現できます：

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

この例では、:idはドナミックセグメントです。コンポーネント内でthis.$route.params.idを通じてアクセスできます。

ネsted Routes

アプリが成長すると、コンポーネントを互いに嵌め込むことがしたい場合があります。Vue Routerはこれを簡単にします：

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

この設定により、/user/123/profileや/user/123/postsのようなURLが使用できます。

ナビゲーションガード

最後に、ナビゲーションガードについてお話ししましょう。これらは、ナビゲーションをリダイレクトまたはキャンセルするために提供されるフックで、アプリの「ボウンス」のように、誰が入るかをコントロールします。

以下にシンプルなグローバルbeforeガードの例を示します：

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})

このガードは、ユーザーが認証されているかどうかを確認し、それ以外のルートへのナビゲーションを許可します。

それでは、皆さん！Vueのルーティングの基本を一緒に旅しました。練習は完璧を生みますので、これらの概念を自分のプロジェクトで実験してみてください。ハッピーコーディング、そしてあなたのルートが常に望む場所に導いてくれることを願っています！

Credits: Image by storyset