Vue3のルーティング機能の詳細解説：SPAアプリケーションのルーティングジャンプを実現するアプリケーション

フロントエンド テクノロジの継続的な開発により、シングル ページ アプリケーション (SPA) がフロントエンド開発の主流となり、ルーティングは SPA アプリケーションの不可欠な部分となっています。 Vue3 では、ルーティング機能が更新および改善され、より使いやすく、より強力になりました。この記事では、Vue3 でのルーティング関数の応用と、SPA アプリケーションでのルーティング ジャンプの実装方法を詳しく紹介します。

1. Vue3 のルーティング機能

Vue3 のルーティング ジャンプはすべて「ルート ナビゲーション機能」と呼ばれるルーティング機能によって行われます。基本的な使い方は次のとおりです。

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

router.push('/home')

ルートジャンプは、router.push()関数を呼び出してジャンプ先のパスを指定することで実現できます。このうち、createRouter() 関数はルーターの作成に使用され、history パラメーターはルーティング モードを指定し、routes パラメーターはルーティング パスとコンポーネント間のマッピング関係を定義します。

2. ルート ガードの実装

実際の開発では、ルート ジャンプを制限および制御する必要がある場合があります。このとき、Vue3で提供されているルートガード(Route Guard)を利用することができます。ルート ガードは、ルートがジャンプしようとしているときに呼び出される関数です。この機能内で判断・処理することで経路制御を実現します。 Vue3 は次のルート ガード関数を提供します:

2.1 beforeEach

この関数は各ルート ジャンプの前に呼び出されます。true を返すとジャンプを続行することを意味し、false を返すとキャンセルすることを意味します。この機能ではログイン認証や権限判定などを行うことができます。

router.beforeEach((to, from, next) => {
  // to: 即将要跳转的路由
  // from: 当前页面正要离开的路由
  // next: 控制路由是否可以跳转的函数

  const loggedIn = localStorage.getItem('user')

  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login')
  } else {
    next()
  }
})

2.2 beforeRouteEnter

この関数はコンポーネント内でのみ使用できます。この関数は、コンポーネントがまだ作成されていないときに呼び出されます。この関数内でコンポーネントのインスタンスを取得し、取得後に操作することができます。

export default {
  beforeRouteEnter(to, from, next) {
    axios.get('/user').then(response => {
      if (response.data.isAdmin) {
        next()
      } else {
        next('/403')
      }
    })
  }
}

2.3 beforeRouteUpdate

この関数は、ルートがジャンプした後、現在のコンポーネントがまだ再利用されているときに呼び出されます。この関数でコンポーネントのデータを更新できます。

export default {
  beforeRouteUpdate(to, from, next) {
    const id = to.params.id
    axios.get(`/user/${id}`).then(response => {
      this.user = response.data
      next()
    })
  }
}

3. 動的ルーティングの実装

ルーティング ジャンプ時に動的にルーティング パスを生成する必要がある場合があります。 Vue3では「ダイナミックルート」機能を提供しています。動的ルーティングは、ルーティング パスに「:」で始まるプレースホルダーを追加することによって実装されます。

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

上記の例では、「:id」プレースホルダーを通じてルーティング パスの動的な生成を実現しました。ジャンプをルーティングするとき、to.params.id を介してパス内の ID 値を取得できます。

router.push({ path: `/user/${userId}` })

4. ネストされたルーティングを実装する

複雑なページの場合、ネストされたルーティングを実装する必要がある場合があります。 Vue3 は、ネストされたルーティングのサポートも提供します。親ルートとサブルートにサブルートを定義することで、ネストされたルーティングを実装できます。

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'list',
          component: List
        },
        {
          path: 'detail/:id',
          component: Detail
        }
      ]
    }
  ]
})

上の例では、ホーム ルートに list とdetailという 2 つのサブルートを定義しました。 List コンポーネントでは、$route オブジェクトの Children 属性を通じてサブルート情報を取得できます。

export default {
  created() {
    console.log(this.$route.children) // [ { path: 'list', ... }, { path: 'detail/:id', ... } ]
  }
}

5. 概要

Vue3 では、ルーティング機能は SPA アプリケーションを実装するための鍵の 1 つです。ルーティング機能を通じて、ルーティング ジャンプ、ルーティング ガード、ダイナミック ルーティング、ネストされたルーティング、その他の機能を実装できます。開発者にとって、ルーティング機能の使用を習得することは非常に重要なステップであり、フロントエンドの開発能力を向上させる唯一の方法でもあります。

以上がVue3のルーティング機能の詳細解説：SPAアプリケーションのルーティングジャンプを実現するアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。