Vue.jsでルーターにパラメータを渡す方法

今回は、Vue.js のルーターがパラメーターを渡す方法について説明します。Vue.js でルーターがパラメーターを渡すときの 注意事項 について説明します。実際のケースを見てみましょう。

Vue-router パラメーターの受け渡し

ルーターでパラメーターを渡す理由

シナリオを想像してください。 現在、ホームページ上で、項目の詳細情報を表示するには、項目をクリックする必要があります。このとき、トップページの詳細ページにアイテムのIDを渡す必要があり、詳細ページはIDを介して詳細情報を取得できます。

vue-routerパラメータの受け渡しメソッド

Parmaパラメータの受け渡し

投稿コード:

/router/index.vue

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Home',
   component: Home
  },
  {
   path: '/work',
   name: 'Work',
   component: Work
  }
 ]
  })

Component WorksはコンポーネントWork

/components/Home /に作業IDを渡します。 Comtent/Works.vue

// 触发它传递一个对象到组件Work
getIt (id) {
 this.$router.push({
  path: '/work',
  name: 'Work',
  params: {
   id: id
  }
 })
  }

/components/Work/Index.vue

<template>
  <p class="work">
   work: {{id}}
  </p>
 </template>
 
 <script>
 export default {
  name: 'Work',
  data () {
   return {
    id: this.$route.params.id //拿到id
   }
  }
 }
 </script>

実行中のスクリーンショット:

クエリパラメータ

クエリする上記のパラメータを変更します。のparmas と query の違い

query は URL を介してパラメータを渡し、常に URL に表示されます

parmas はパラメータを渡します。ページを更新すると、データがなく、取得したパラメータは保存できません。この記事では、ケースメソッドをマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Angular+Font-Awesome 手順の詳細な説明

js および typescript でのクラスの使用方法の詳細な説明

以上がVue.jsでルーターにパラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。