Vue3 ルーティング（Vue Router）

この章では、Vue ルーティングについて紹介します。

Vue ルーティングでは、異なる URL を介して異なるコンテンツにアクセスできます。

Vue を使用すると、複数のビューを持つシングルページ Web アプリケーション（single page web application、SPA）を実現できます。

Vue.js ルーティングには、vue-router ライブラリの読み込みが必要です。

中国語ドキュメントのURL：vue-router ドキュメント。

Vue Router は、URL パスをアプリケーション内のコンポーネントにマッピングします。ユーザーがアプリケーション内を移動すると、URL は更新されますが、ページは再読み込みされないため、スムーズなユーザーエクスペリエンスが提供されます。

上の図は、2 レベルのネストされたルート構造を示しています。：

• 最上位レベル（App.vueの<router-view>)は、独立レイアウト（例：Login.vue）またはメインレイアウトをレンダリングします。（Layout.vue）。
• メインレイアウト（Layout.vue)内部には 2 つ目の<router-view>が含まれ、機能ページの子コンポーネント（例：Dashboard.vue、User.vue）のレンダリングに使用され、これによりページヘッダー、サイドバー、ページフッターの永続表示を実現します。
• 一致しないパスは最終的に独立したpage404.vue。

コア構成要素

インストール

npm インストール

npm install vue-router

npm（中国国内ミラー）

淘宝ミラーの使用を推奨します：

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

直接ダウンロード / CDN

https://unpkg.com/vue-router@4

基本的な使い方

1. ルートテーブルの作成

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

export default createRouter({
  history: createWebHistory(),
  routes
})

2. アプリケーションへのマウント

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

3. ページの描画先

<router-view></router-view>

4. 遷移

<router-link to="/about">About</router-link>

5. 動的ルート

{ path: '/user/:id', component: User }

`/user/10` にアクセスすると、`$route.params.id === '10'` になります。

6. 遅延読み込み

const About = () => import('../views/About.vue')

7. ナビゲーションガード（認証）

router.beforeEach((to, from, next) => {
  next()
})

8. リダイレクト

{ path: '/old', redirect: '/' }

9、404

{ path: '/:pathMatch(.*)*', component: NotFound }

簡単な例

Vue.js + vue-router を使用すると、シングルページアプリケーションを簡単に実装できます。

<router-link>コンポーネントであり、ナビゲーションリンクを設定して異なる HTML コンテンツを切り替えるために使用されます。to属性はターゲットアドレスを指し、 は表示するコンテンツです。

次の例では、vue-router を追加し、コンポーネントとルートのマッピングを設定して、vue-router にそれらをどこでレンダリングするかを指示します。コードは次のとおりです。

router-link

通常の a タグではなく、カスタムコンポーネント router-link を使用してリンクを作成していることに注意してください。これにより、Vue Router はページを再読み込みせずに URL を変更し、URL の生成とエンコーディングを処理できます。これらの機能をどのように活用できるかについては、後ほど説明します。

router-view

router-view は URL に対応するコンポーネントを表示します。レイアウトに合わせて、どこにでも配置できます。

クリックしたナビゲーションリンクにはスタイルが適用されます。class ="router-link-exact-active router-link-active"。

アプリケーションの例

以下の例は、ルーティングの定義、作成、マウント、ナビゲーションとレンダリングという 5 つの核心的なステップを網羅しています。

1. main.js（エントリーファイル）

2. router/index.js（ルート設定）

3. App.vue（ルートコンポーネント）

このアプリケーションを実行すると：

• クリックHomeリンクで、URL は/，<router-view>の中に表示されHome Pageコンポーネントの内容。
• クリックAboutリンクで、URL は/about，<router-view>の中に表示されAbout Usコンポーネントの内容。
• クリック404 Demoリンクで、URL は/nonexistent，<router-view>の中に表示され404 Not Foundコンポーネントの内容。

<router-link> 関連属性

次に、<router-link> の属性について詳しく見ていきましょう。

to

ターゲットルートのリンクを表します。クリックされると、内部で直ちに `to` の値が `router.push()` に渡されます。そのため、この値は文字列、またはターゲット位置を記述するオブジェクトのいずれかになります。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home.html">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

replace 属性を設定すると、クリック時に router.replace() が呼び出され、router.push() ではなくなり、ナビゲーション後に履歴が残りません。

<router-link :to="{ path: '/abc'}" replace></router-link>

append

append 属性を設定すると、現在の (相対) パスの前にそのパスが追加されます。例えば、/a から相対パス b にナビゲートする場合、append を設定していなければパスは /b になり、設定していれば /a/b になります。

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

時には、次のように<router-link>特定のタグとしてレンダリングしたい場合があります。例えば<li>。tagそこで、私たちは次を使用します

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

prop クラスでどのタグを指定します。同様に、クリックを監視してナビゲーションをトリガーします。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

ここに注意してくださいclass使用active-class="_active"。

exact-active-class

リンクが完全に一致したときにアクティブになる class を設定します。次のコードで置き換えることができます。

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

ナビゲーションをトリガーするために使用できるイベントを宣言します。文字列または文字列を含む配列にすることができます。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

上記のコードでは event を mouseover に設定しており、マウスが Router Link 1 の上に移動すると、ナビゲーションの HTML コンテンツが変更されます。

Vue Router（v4、Vue 3）コア API マニュアル

一、createRouter設定項目

二、History ファクトリ

三、RouteRecord（ルートテーブル項目）

四、ルートナビゲーション（Router インスタンスメソッド）

五、ナビゲーションガード

六、<router-link>属性

七、<router-view>属性

八、Route（現在のルートオブジェクト）

このオブジェクトはuseRoute() 或 this.$route取得されます。

九、コンポジション API（Composition API）

十、プログラムによるナビゲーション（完全な例）