Vue で SPA - ルーティング

現代の Web アプリの多くは SPA (エスピーエー、Single Page Application) と呼ばれる形式で作られています。これは、ページ遷移してもブラウザの再読み込みがなく、スムーズなユーザー体験を提供するアプリのことです。

異なる「ページ」への URL の切替え

SPA において、異なる「ページ」への URL の切替えや、それに応じたコンポーネントの表示を管理するのが ルーティング (routing) ライブラリ です。

ルーティング (routing)

Vue では公式のルーティングライブラリとして Vue Router (vue-router) が広く使われています。

URL 切替えと Vue ルーティング

+-------------------------------------------------------+ | Web / アプリ サーバー | +-------------------------------------------------------+ ^ | Vue Router 管轄外の場合、 | サーバーリクエスト | +-------------------------------------------------------+ | ブラウザ (SPA) | +-------------------------------------------------------+ | URL: example.com/ URL: example.com/about | | | | +--------------------+ +--------------------+ | | | HomeView | | AboutView | | | | コンポーネント | | コンポーネント | | | +--------------------+ +--------------------+ | | ^ ^ | | | (コンポーネント表示) | | | +---------------+---------------+ | | | <router-view> | | | +---------------+---------------+ | | ^ | | | | | (ルーティングの決定) | | +---------------+---------------+ | | | Vue Router | | | +-------------------------------+ | | ^ | | | | | (URL 切替え リクエスト) | +-------------------------------------------------------+ 

Vue Router を使ってみよう

1. インストール: プロジェクトに Vue Router をインストールします。
   

   npm install vue-router 

2. ルーターの定義: router/index.js のようなファイルで、どのURLでどのコンポーネントを表示するかを定義します。
   

   // router/index.js import { createRouter, create Web History } from 'vue-router' import HomeView from '../views/HomeView.vue' import AboutView from '../views/AboutView.vue' const routes = [ { // ルートパス (トップページ) path: '/', name: 'home', component: HomeView }, { // /about パス path: '/about', name: 'about', component: AboutView } ] const router = createRouter({ // HTML 5 History モードを使用 history: create Web History(), routes }) export default router 

3. Vue アプリへの組み込み: main.js などのエントリーポイントで、Vue アプリにルーターを組み込みます。
   

   // main.js import { createApp } from 'vue' import App from './App.vue' // ルーターをインポート import router from './router' const app = createApp(App) // ルーターをアプリに適用 app.use(router) app.mount('#app') 

4. コンポーネントでの使用

   <router-link>

   • クリックするとページ遷移するリンクを作成します。HTML の <a> タグに似ていますが、SPA の内部遷移を担います。
     

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

   <router-view>

   • 現在の URL に対応するコンポーネントが描画される場所です。
     

     <template> <router-view></router-view> </template> 

Vue Router を使うことで、複数の「画面」を持つ SPA を効率的に構築できます。