Vue2 に対する Vue3 の進歩: より高度なルート マネージャー

タイトル: Vue2 と比較した Vue3 の進歩: より高度なルーティング マネージャー

はじめに:
フロントエンド テクノロジの継続的な開発により、Vue フレームワークは徐々に最も人気のあるフロントエンドになりました。近年のエンドフレームワークの１つ。 Vue2 のアップグレード バージョンとして、Vue3 には、より高度なルーティング マネージャーなど、多くの新機能と改善が加えられています。この記事では、Vue2 と比較した Vue3 のルート管理の進歩を探り、コード例を通してそれを実証します。

1. Vue2 ルーティング マネージャー
Vue2 では、通常、vue-router ライブラリを使用してルーティング管理を実装します。このライブラリは、ルートの定義、ルート ナビゲーションの処理、およびルート コンポーネントのレンダリングのための一連の API を提供します。 vue-router を使用した簡単な例を次に示します。

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- main.js -->
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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

上の例では、VueRouter を使用してルーティング インスタンスを作成し、それを Vue インスタンスに渡します。ルート配列を定義することで、異なるパスの下にある対応するコンポーネントを指定してページ間を切り替えることができます。

ただし、Vue2 のルート マネージャーには、いくつかの点で制限があります。たとえば、動的ルーティングやネストされたルーティングを処理する必要がある場合、コードは複雑になり、保守が困難になります。さらに、Vue2 のルーティング マネージャーは、非同期コンポーネントに対して十分フレンドリーではありません。

2. Vue3 のルーティング マネージャー
Vue3 には、vue-router@next という新しいルーティング マネージャー ライブラリが導入されています。 Vue2 のルーティング マネージャーと比較して、Vue3 ではいくつかの重要な改善と更新が行われ、ルーティング管理がより高度かつ柔軟になりました。次に、vue-router@next の使用例を示します。

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- main.js -->
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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

上の例では、createRouter 関数を使用してルーティング インスタンスを作成し、createWebHistory 関数によるルート ナビゲーションにブラウザの履歴モードを使用します。ルート配列を定義することで、Vue2 などの異なるパスにある対応するコンポーネントを指定できます。

ただし、Vue3 のルーティング マネージャーでは、動的ルーティング、ネストされたルーティング、および非同期コンポーネントの処理がより便利になります。以下は、vue-router@next を使用して動的ルーティングを処理する例です。

<!-- App.vue -->
<template>
  <div>
    <router-view :key=" $route.fullPath "></router-view>
  </div>
</template>

<!-- main.js -->
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import User from './components/User.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User }
  ]
})

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

上の例では、動的ルート、つまり「/user/:id」を定義しました。コンポーネント内で $route オブジェクトを使用すると、動的ルートのパラメータを簡単に取得し、パラメータに基づいて対応するコンテンツをロードできます。

さらに、Vue3 のルート マネージャーは、より優れた非同期コンポーネントのサポートも提供します。 component: () => import('./components/About.vue') を使用してコンポーネントをオンデマンドで読み込み、ページ読み込みのパフォーマンスを向上させることができます。

結論:
Vue3 では、Vue2 と比較してルーティング マネージャーに多くの進歩と改善が加えられ、ルーティング管理がより高度で、柔軟で、使いやすくなりました。新しい vue-router@next ライブラリを通じて、動的ルーティング、ネストされたルーティング、非同期コンポーネントなどの機能を実装できます。これにより、複雑なフロントエンド アプリケーションの構築が容易になります。

参考資料:

• Vue Router 公式ドキュメント: https://router.vuejs.org/
• Vue Router@next 公式ドキュメント: https:// next.router.vuejs.org/

以上がVue2 に対する Vue3 の進歩: より高度なルート マネージャーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。