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 を印刷すると、次のようになります。

多くのプロパティとオブジェクト (履歴オブジェクトなど) が含まれており、どのページでも push()、replace()、go() などのメソッドを呼び出すことができます。

push() メソッドは履歴に記録を追加します。ブラウザの戻るボタンをクリックすると、前のページに戻ることができます。<router-link to=' ... ' /> をクリックすると、this.$router.push() を呼び出すのと同じです。

• this.$router.push() メソッドのパラメータには、文字列パスまたはアドレス オブジェクトを指定できます。次に例を示します。
• this.$router.push('home') this.$router.push({path: 'home'})

パラメータを指定することもできますが、パスが指定されている場合はパラメータは無視されることに注意してください。例:

this.$router.push({path: 'home', params: { page: 2}}) ここでのパラメータは無視されます

同じルールがルータリンクのto属性にも適用される。

いくつかの方法があります:

• this.$router.push({パス: `/home/${page=2}``})
• this.$router.push({name: 'home', params: { page: 2}})
• this.$router.push({path: 'home', query: { page: 2}})

これらのメソッドはパラメータを取得します: this.$route.params.page / this.$route.query.page

以上がVueにおける$routerと$routeの違いについての詳しい説明です。Vueについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください！