Vueでサブルートにジャンプする方法

Vue は、コンポーネントベースのアプローチを使用してアプリケーションを構築する人気のあるフロントエンド フレームワークです。 Vue ルーターは、アプリケーションを複数のビューに簡単に分割し、ユーザーがビュー間を移動できるようにする Vue が提供するプラグインです。 Vue ルーターでは、各ビューはルートであり、各ルートは複数のサブルートを持つことができます。この記事ではサブルートをジャンプする方法を紹介します。

1. サブルートの宣言

Vue ルーターでサブルートを宣言するには、ネストされたルートを使用する必要があります。子ルートを宣言するには、親ルートの Children フィールドを使用します。例:

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

上記のコードでは、parent という名前の親ルートと child という名前の子ルートを宣言します。ユーザーが /parent/child にアクセスすると、親コンポーネントと子コンポーネントが表示されます。

2. ジャンプ サブルート

Vue のジャンプ ルーティングでは、$router オブジェクトのルーターリンク コンポーネントまたはプログラムによるナビゲーションを使用できます。サブルートをジャンプするときは、完全なルーティング パスを提供する必要があります。たとえば、上記の例で子ルートにジャンプするには、/parent/child の完全なルート パスを指定する必要があります。

Use router-link:

<router-link>跳转到子路由</router-link>

Use Programmatic Navigation:

this.$router.push('/parent/child')

上記のコードでは、$router.push メソッドを使用してルートをジャンプします。

3. パラメータを渡すプログラム ナビゲーション

実際には、サブルートにジャンプしていくつかのパラメータを渡す必要があることがよくあります。 Vue では、プログラム ナビゲーションの params フィールドを使用してパラメーターを渡すことができます。例:

this.$router.push({ path: '/parent/child', params: { id: 1 }})

上記のコードでは、値 1 の id パラメーターを渡しました。パラメータを受け取るサブルーティング コンポーネントでは、this.$route.params を通じてパラメータを取得できます。

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}

4. 結論

この記事では、Vue ルーティングでサブルートをジャンプする方法を紹介します。サルートを宣言する方法、ルーターリンクとプログラムによるナビゲーションを使用してサルートにジャンプする方法、パラメータを渡す方法について説明しました。この記事が初心者の方に役立つことを願っています。

以上がVueでサブルートにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。