vue の $router と $route の簡単な紹介 (例付き)

この記事では、vue の $router と $route について簡単に紹介します (例を示します)。必要な方は参考にしていただければ幸いです。

ルーティングの基本概念

ルート、それはルートです。

{ path: '/home', component: Home }

routes はルートのセットです。

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

ルーターは、コンテナ、またはルートのグループを管理するメカニズムとして理解できます。簡単に言うと、ルートは URL と関数をマッピングするだけで、URL を受信した後、ルーティング マッピング テーブル内で対応する関数を検索します。このプロセスはルーターによって処理されます。

    const router = new VueRouter({
          routes // routes: routes 的简写
    })

VUE では、

$route は、名前、パス、クエリ、パラメータなどを取得できる現在のルーター ジャンプ オブジェクトです。

$router は VueRouter インスタンスです。別の URL に移動するには、$router.push メソッドを使用します。前の履歴に戻るには、$router.go メソッドを使用します。上で述べたように、ここでの $router はルーティング ジャンプを管理します。英語では、er の語尾は、ルートの行き先を制御するマネージャーのようなものであると想像できます (プッシュ、ゴー)。覚えて。

ルート ジャンプ

1 完全なパスを手書きできます:

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

この方法では、ルーティングで次の構成が必要です

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

パラメータを受け取るこの方法は this.$route.params.userId です。

2 params を使用して渡すこともできます:

this.$router.push({name:'Login',params:{id:'leelei'}})
//不带参数 变成 ip/login

3 クエリを使用して渡すこともできます:

this.$router.push({path:'/login',query:{id:'leelei'})
//带查询参数变成 ip/login?id=leelei
//带斜杠/代表从根目录出发，不会嵌套之前的路径

query パラメータはパス用であり、params パラメータは名前用です。 。パラメータを受け取る方法も同様です。 。 this.$route.query.および this.$route.params.

これは単なるジャンプ URL であることに注意してください。この URL にジャンプするときにどのコンポーネントが表示されるかを設定する必要があります。ルーター ジャンプと ラベル ジャンプのルールは似ています。

注意事項

クエリを使用してパラメータを渡すと、get リクエストと同様にブラウザの URL バーにパラメータが表示されます。それ以外の場合は、post リクエストと同様に、パラメータを渡しません。

パスが指定されている場合、params は無視されます (つまり、params を使用してパラメータを渡したい場合は、name を使用する必要があります) が、クエリの場合は当てはまりません。フルパスとクエリパラメータを使用して渡す場合、ルートによって渡されたパラメータは、ページが更新されても失われません。

router.push と router.replace の違いは、履歴に新しいレコードを追加するのではなく、現在の履歴レコードを置き換えることです。つまり、replace を使用してジャンプした Web ページの「戻る」ボタンはクリックできません。

以上がvue の $router と $route の簡単な紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。