Vue ルーティングでパラメーターを渡す 3 つの基本モード (詳細なチュートリアル)

この記事では、主に Vue ルーティングでパラメータを渡す 3 つの基本的なモードを詳しく紹介します。興味のある方は参考にしてください。ルーティングはさまざまなページをつなぐ役割を果たします。ブリッジは、ある意味、2 つのブリッジが正常に接続できるかどうかを決定する非常に重要な役割を果たします。

vueルーティングでは、3つのパラメータ送信方法がサポートされています。

シナリオでは、親コンポーネントの li 要素をクリックして子コンポーネントにジャンプし、子コンポーネントが対応する li データを取得し、対応する正しいコンテンツを表示できるようにパラメータを渡します。

親コンポーネント内:

<li v-for="article in articles" @click="getDescribe(article.id)">

オプション 1:

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/describe/${id}`,
    })

// 方案一，需要对应路由配置如下：
  {
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }
// 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。

// 在子组件中可以使用来获取传递的参数值。
$route.params.id

オプション 2:

// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
    this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//子组件中: 这样来获取参数
$route.params.id

オプション 3:

// 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
  this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

// 对应路由配置：
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

// 对应子组件: 这样来获取参数
$route.query.id

// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

上記は、皆さんの参考になれば幸いです。これからのみんな。

関連記事:

Element-uiがvueのテーブルにスクロールロードメソッドを実装する方法について

Reactコンポーネントのパフォーマンス最適化について詳しく説明

vueを使ってズームイン、ズームアウトしながら画像をトリミングする方法、回転機能（詳細なチュートリアル）

以上がVue ルーティングでパラメーターを渡す 3 つの基本モード (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。