Vue-Router ルーティングでパラメーターを使用してジャンプする 3 つの方法の完全なリストページを更新してもパラメーターは失われず、アドレス URL には表示されません。

このブログでは、Vue-router でパラメータを渡す方法と、パラメータを失わずに URL に結合せずにページのパラメータを更新する方法を詳しく紹介します。

Vue-Router がパラメータジャンプを実行する 3 つの方法

Vue-Router は、次のようにパラメーターを渡すさまざまな方法を提供します。

ルートを定義するときは、ルーティングパスにパラメータプレースホルダを追加できます (例: /user/:id)。

ルーティングパスの : で始まるのはパラメータプレースホルダで、パラメータ名は id です。このルートに一致する場合、たとえば /user/1 にアクセスすると、パラメータ ID がコンポーネントの this.$route.params オブジェクトに入力されます。

クエリパラメータは、URL の後にパラメータとともに渡されます (例: /user?id=1)。

Vue-Router のアクセスクエリパラメータは、$route.query を通じて取得できます。例:

const user_id = this.$route.query.id

ルーティングコンポーネントでは、props を通じてパラメータをコンポーネントに渡すことができます。ルーティング設定で props 属性を設定する必要があります:

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

この場合、パラメータはコンポーネントのpropsに設定されます。たとえば、/user/1 にアクセスすると、パラメータ ID がコンポーネントに渡されます。コンポーネント User. の小道具。this.id 経由でアクセスできます。

コンポーネント内のthis.$route.params または this.$route.query を通じてルーティングパラメータを取得でき、$route を使用して直接アクセスできます。コンポーネント内のルーティング情報。

ルート名を通じてパラメータを渡すには、ルートを定義するときに name 属性を設定する必要があります。例:

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

user という名前のルートがここで定義されており、name を通じて他の場所からアクセスできます。例:

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

は、this.$route.params を通じてパラメータを取得できます。