Vue でルーティングを使用してページを切り替えるときにトランジション効果を実現するにはどうすればよいですか?

Vue でルーティングを使用して、ページを切り替えるときにトランジション効果を実現するにはどうすればよいですか?

フロントエンド テクノロジの発展に伴い、ページ切り替えアニメーションは、ユーザー エクスペリエンスを向上させる重要な部分として、Web アプリケーションでますます広く使用されています。 Vue フレームワークでは、ルーティングによるページ切り替えを実装し、Vue のトランジション効果と組み合わせて、ページ切り替え時のアニメーション効果を実現できます。この記事では、Vue のルーティングとトランジション効果を使用して、ページ切り替えのトランジション効果を実現する方法を紹介します。

まず、Vue ルーティング プラグインをインストールする必要があります。コマンド ラインに次のコマンドを入力してインストールします。

npm install vue-router

インストール後、Vue と Vue-router をプロジェクトのエントリ ファイル (main.js) に導入し、Vue-router インスタンスを作成します。コードは次のとおりです。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

次に、ルーティングを構成する必要があります。 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({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

ルーティングを構成するプロセスでは、パス、名前、コンポーネントを定義することによって、ルーティングとページの間の対応関係を実現できます。たとえば、上記のコードでは、ルート パスにアクセスすると Home コンポーネントが表示され、/about パスにアクセスすると About コンポーネントが表示されます。

次に、App.vue の タグを使用して、ルートに対応するコンポーネントをレンダリングする必要があります。コードは次のとおりです。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

この時点で、ルーティングを通じてページを切り替えることができます。ただし、ページ切り替えのトランジション効果を追加したい場合は、Vue のトランジション効果を使用する必要があります。

App.vue では、Vue の コンポーネントを使用して、ページ切り替えのトランジション効果を追加できます。まず、 コンポーネントを タグの外側でラップします。コードは次のとおりです。

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

次に、