vueを使ってルーターに参加する方法

今回は、Vue パスルーターの使い方と、Vue パスルーターを使用する際の注意事項について説明します。以下は実際のケースです。見てみましょう。

vueパラメータの渡し方1つ

1、ルーティング設定

 {
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

2、利用方法

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })

3、取得方法(説明ページ上)

$route.params.id

上記のメソッドを使用して前のページを取得して渡しますid 値

vue パラメータの渡し方 2

1. ルーティング設定

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
（这个地方默认配置就可以了，不用做任何的处理）

2. 使用方法

  this.$router.push({
   name: 'Describe',
   params: {
   id: id
   }
  })

親コンポーネント内: ルーティング属性の名前を通じて一致するルートを決定し、渡しますそれはparamsパラメータを通じて行われます。

3. 取得方法 (説明ページ上)

$route.params.id

は、params を使用して取得することもできます。

vue パラメータの受け渡し方法 3

1. ルーティング設定

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }

(デフォルト設定)

2.利用方法

 this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
（params换成了query）

3. 取得方法(説明ページ上)

$route.query.id

(ここではidの取得にもクエリを使用しています。先ほど取得したparamsとの違いは、クエリで取得したidの値が表示されることです。渡した値を確認できます)

props 値を渡すメソッド

親コンポーネント

(テーブルデータは特定の値ではなくランダムに名前を付けることができます)

<p class="content">
//这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

子コンポーネント

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

propは一方向バインディングであるため、子コンポーネント内で props を変更しないでください。ただし、ここで props によって渡される値は、親コンポーネントの値が変化すると変化します。これは動的変化です。

$route

1、$route.path

type: string

stringの使用に関するヒント。現在のルートのパスに対応し、常に「/」などの絶対パスに解決されます。フー/バー」。

2, $route.params

Type: Object

動的フラグメントと完全一致フラグメントを含むキー/値オブジェクト ルーティング パラメーター がない場合、それは空のオブジェクトです。

3、$route.query

Type: Object

URL クエリパラメータを表すキー/値オブジェクト。たとえば、パス /foo?user=1 の場合、$route.query.user == 1、またはクエリ パラメーターがない場合は空のオブジェクトになります。

4, $route.hash

Type: string

現在のルートのハッシュ値(#付き)、ハッシュ値がない場合は空の文字列です。

5, $route.fullPath

Type: string

クエリパラメータとハッシュのフルパスを含む、解析完了後の URL。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

文字化けした中国語パラメータを送信するという jQuery のリクエストをすばやく解決する方法

PHP を使用してフォームの繰り返し送信を防ぐ方法

以上がvueを使ってルーターに参加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。