Vue Routerはpropsでパラメータを伝達します

Vue Routerはpropsでパラメータを伝達します
Vueプロジェクトでは、ルーティングによって他のページにジャンプすると、比較的複雑なパラメータが携帯される可能性があります.ダイナミックパスパラメータ（ /user/:username）またはURLクエリーパラメータ（/user?username=abc）を使用するのは、文字列しか伝達できないため、明らかに不便です.この場合、ルーティングpropsパラメータを有効にしたり、デカップリングの目的を達成したりすることができます.
propsを有効にすると、次の2つの方法でパラメータを渡すことができます.
方式一
単純なパラメータのみを渡す場合は、ダイナミックパスパラメータを介してパラメータを渡すことができます.次の例は、AページジャンプBページです.
ルーティング構成

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

Aページ

this.$router.push('/usr/123') //           this.$router

Bページ

const User = {
    props: ['id'],
    template: '
User {{ id }}
'}

方式2
複雑なパラメータのみを渡す場合は、この方法でパラメータを渡すことができます.次の例は、AページジャンプBページです.
ルーティング構成

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

Aページ

this.$router.push({
    name: 'user',
    params: {
    	user: {
    		name: '  ',
        	age: 18,
        	gender: ' ',
    	}
        ...
    }
})

Bページ

const User = {
    props: ['user'],
    template: '
  ： {{ user.name }}
  ： {{ user.age }}
  ： {{ user.gender }}
'
}