Vue.js の動的ルーティングと名前付きビューの簡単な分析

この記事の内容は、Vue.js の動的ルーティングと名前付きビューの簡単な分析に関するもので、必要な友人に参考にしていただけるように共有します

。 動的ルーティング 実際には、ルーティングパラメータとも呼ばれます。

const router = new VueRouter({
  routes: [    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

上記の形式のパスは、コロンの後にパラメータがあり、その後に複数のパラメータを設定できます。

/user/:id と /user/:name に注意してください。パラメーターが変更されると、コンポーネントは再利用されるため、コンポーネントのライフサイクルフックは再度呼び出されません。コンポーネントを再利用する場合、$route オブジェクトの変更を監視することで、ルートが変更されるかどうかを監視できます。

RouterUpdate の前のルーティング フックも実行されます。

vue-router は、パスマッチングエンジンとして path-to-regexp を使用します。パスが複雑な場合は、高度なマッチングパターンを学習できます。ただし、パスは通常、あまり複雑になるように設計すべきではありません。複雑すぎる場合は、それを簡素化する方法を検討する必要があります

名前付きビュー

複数のビューを同時に表示したい場合があります。レベル)、サイドバー (サイド ナビゲーション) を含むレイアウトの作成など、ビューには main (メイン コンテンツ) の 2 つがあります。このとき、ビューに名前を付けると便利です。単一のアウトレットを持つ代わりに、インターフェース内に個別に名前を付けた複数のビューを持つことができます。 router-view が名前を設定しない場合は、デフォルトのデフォルトが使用されます。

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="header"></router-view>

ビューは 1 つのコンポーネントを使用してレンダリングされるため、同じルートの場合、複数のビューには複数のコンポーネントが必要です。コンポーネント構成を正しく使用してください (s 付き):

routes: [
    {
      path: '/',
      components: {        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]

vue-router ルーティングの基本の簡単な紹介

以上がVue.js の動的ルーティングと名前付きビューの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。