Vueルーティングコンポーネントでパラメータを渡す8つの方法の詳細な説明

定数ルート = [
 // 動的セクションはコロンで始まります { path: 'details/:id', name: "details", component: Details },
]

const ホーム = {
 テンプレート: '<div @click="toDetails">詳細へ</div>',
 方法:
  詳細() {
   // 文字列パス this.$router.push('/details/001')
   // パスを持つオブジェクト this.$router.push({path: '/details/001'})
   // ルートに名前を付けます。ルートを設定する場合、名前フィールドは必須です this.$router.push({ name: 'details', params: { id: '001' } })
  }
 }
}

// `params` は `path` と一緒に使用できません router.push({ path: '/details', params: { id: '001' } }) // -> /details

const 詳細 = {
 テンプレート: '<div>詳細 {{ $route.params.id }} </div>',
 作成された() {
  // ルートの変更をリッスンします this.$watch(
   () => this.$route.params,
   (toParams、前のParams) => {
    // ルートの変更に応答します...
   }
  ）
 },
}

this.$router.push('/details/001?kind=car')
this.$router.push({ パス: '/details/001'、クエリ: { 種類: "車" }})
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})

const 詳細 = {
 テンプレート: '<div>詳細 {{ $route.query.kind }} </div>',
 作成された() {
  // ルートの変更をリッスンします this.$watch(
   () => this.$route.query,
   (toParams、前のParams) => {
    // ルートの変更に応答します...
   }
  ）
 },
}

this.$router.push('/details/001#car')
this.$router.push({ パス: '/details/001', ハッシュ: '#car'})
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})

const 詳細 = {
 テンプレート: '<div>詳細 {{ $route.hash.slice(1) }} </div>',
}

定数ユーザー = {
 テンプレート: '<div>ユーザー {{ $route.params.id }}</div>'
}
const ルート = [{ パス: '/user/:id', コンポーネント: ユーザー }]

定数ユーザー = {
 props: ['id'], // コンポーネント内のpropsを通じてIDを取得します
 テンプレート: '<div>ユーザー {{ id }}</div>'
}
// ルーティング設定で、props フィールドを追加し、値を true に設定します
const ルート = [{ パス: '/user/:id', コンポーネント: User, プロパティ: true }]

定数ルート = [
 {
  パス: '/user/:id',
  コンポーネント: { デフォルト: ユーザー、サイドバー: サイドバー },
  // ユーザーにプロパティを提供する
  プロパティ: { デフォルト: true、サイドバー: false }
 }
]

定数ルート = [
 {
  パス: '/hello',
  コンポーネント: こんにちは、
  プロパティ: { 名前: 'ワールド' }
 }
]

定数Hello = {
 小道具: {
  名前： {
   タイプ: 文字列、
   デフォルト: 'Vue'
  }
 },
 テンプレート: '<div> こんにちは {{ name }}</div>'
}

// プロパティを返す関数を作成する const dynamicPropsFn = (route) => {
 戻り値: { name: route.query.say + "!" }
}
定数ルート = [
 {
  パス: '/hello',
  コンポーネント: こんにちは、
  プロップ: dynamicPropsFn
 }
]

定数Hello = {
 小道具: {
  名前： {
   タイプ: 文字列、
   デフォルト: 'Vue'
  }
 },
 テンプレート: '<div> こんにちは {{ name }}</div>'
}