Vue2 に対する Vue3 の進歩: より高度なルートマネージャー-Vue.js-php.cn

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

PHPz

リリース： 2023-07-09 08:49:36

オリジナル

1149 人が閲覧しました

タイトル: 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 ライブラリを通じて、動的ルーティング、ネストされたルーティング、非同期コンポーネントなどの機能を実装できます。これにより、複雑なフロントエンドアプリケーションの構築が容易になります。

参考資料: