Vue における $router と $route の違いの詳細な説明

通常、vue プロジェクトではルーティングを使用します。vue-router は vue.js の公式ルーティングマネージャーです。

this.$route: 現在アクティブになっているルートの情報オブジェクト。各オブジェクトはローカルであり、現在のルートのパス、名前、パラメータ、クエリ、その他の属性を取得できます。

this.$router: グローバルルーターインスタンス。ルーターインスタンスを vue ルートインスタンスに注入し、それを各子コンポーネントに注入することで、アプリケーション全体にルーティング機能が備わります。多くのプロパティとオブジェクト (履歴オブジェクトなど) が含まれており、どのページでも push()、replace()、go() などのメソッドを呼び出すことができます。

Vue を使用したことがある人なら誰でも、ルーティングはプログラム型と宣言型に分けられることを知っています。

宣言的:

簡単に言うと、router-link コンポーネントを使用してナビゲートし、to 属性を渡してリンクを指定します (router-link はデフォルトで a タグとしてレンダリングされます)。

ページにサブルートをネストする必要があり、ページがジャンプしない場合は、この方法はあまり役に立ちません、ハハハハ... ルータービューでサブページをレンダリングするだけです。

プログラム:

このように、VueRouter をインポートして呼び出す必要があります。

次に、vue-router を使用する手順について説明します (以下はプログラムによるアプローチです)。

1. ルートジャンプ用に 2 つの単一の .vue コンポーネント (home.vue と user.vue) を定義します。

2. vue、vue-routerをインポートし、ルートを定義します。各ルートにはコンポーネント属性が含まれており、コンポーネントをマップします --- router.js

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。

'./home.vue' から Home をインポートします。
'./user.vue' からユーザーをインポートします。

Vue.use(ルーター);

3. ルーターインスタンスを作成し、ルート設定を渡します --- router.js

定数ルート = [
    { パス: '/home'、コンポーネント: Home },
    { パス: '/user'、コンポーネント: ユーザー }
]

const router = 新しいルーター({
    ルート
})

4. 他のコンポーネントからルートにアクセスできるように、ルートを vue のルートインスタンスに挿入します --- main.js

'./router' からルーターをインポートします

新しいVue({
    ルーター、
    レンダリング: h => h(App)
}).$mount('#app')

一般的な手順は次のとおりです。

さて、豚足が登場します﹏~*上記のユーザーコンポーネントとホームコンポーネントのルートにアクセスするには、this.$router と this.$route の 2 つの方法があります。これら 2 つの方法はほぼ同じように使用されますが、違いもあります。（下記参照）

this.$route は現在アクティブになっているルートの情報オブジェクトを表示していることがわかります。このオブジェクトはローカルであり、現在のルートのパス、名前、パラメータ、クエリ、その他の属性を取得できますが、ここでは詳しく説明しません。

$route.matched は、現在のルートのすべてのネストされたレコード、つまりルート構成内のオブジェクト配列（その独自の情報と子データを含む）を含む配列です。たとえば、私のルート構成は次のとおりです。

const ルーター = 新しい VueRouter({
  ルート: [
    // 次のオブジェクトはルーティングレコードです {
      パス: '/taskList',
      コンポーネント: TaskList、
      名前: 'タスクリスト'、
      子供たち： [
        {
          パス: '/taskDetail',
          コンポーネント: TaskDetail、
          名前: 'タスクの詳細'
        }
      ]
    }
  ]
})

this.$route の一致した展開結果は次のとおりです。

たとえば、ログイン機能にナビゲーションガードを使用する場合、ログインが必要かどうかを判断するためにメタをチェックする必要がある場合は、$route.matched を走査してルートレコードのメタフィールドをチェックできます。

さらに、vue インスタンス内では、this.$router を通じてルーティングインスタンスにアクセスすることもできます。これはグローバルルーティングインスタンスです。ルーターインスタンスは vue ルートインスタンスに注入され、その後各子コンポーネントに注入されるため、アプリケーション全体にルーティング機能が備わります。任意の子コンポーネントで this.$router を印刷すると、次のようになります。