Как передать props во Vue Router от родителя к ребенку?

Question

[wazowskiMarik]

Есть компонент родитель PostItem

код PostItem.vue

<template>
	<div class="post" 
	>
			<div class="post-id" 
			>{{post.id}}</div>
			<div class="post-title" 
			>{{post.title}}</div>
			<div class="post-body" 
			>{{post.body}}</div>
			<div class="post_btns">
				
				<router-link 
				:to="{name: 'PostIdPage', params: {id: post.id, post: post.body}}">Press</router-link>
				<MyButton @click="deletePost">Delete</MyButton>
			</div>
			<hr>
	</div>
</template>

<script>
	export default {
			props: {
				post: {
					type: Object,
					required: true
				}
			},
			methods:{
				deletePost(){
					this.$emit('delete', this.post)
				}
			},
			
		}
</script>

У него есть кнопка

<router-link :to="{name: 'PostIdPage', params: {id: post.id, post: post.body}}">Press</router-link>

динамически формирующая url для компонента-ребенка PostIdPage

код PostIdPage.vue

<template>
    <div>
        <h1>Page id: {{ $route.params.id }} </h1>
        
        <div>{{ $route.params.post }}</div>
    </div>
</template>

<script>
    export default {
        name: 'PostIdPage',
        props: ['post']
    }
</script>

<style>

</style>

Пропсом ожидаю post (props: ['post']), но ничего не происходит

результат в Vue Devtools

мой router.js

import Main from '@/pages/Main' 
import PostsPage from '@/pages/PostsPage'
import About from '@/pages/About'
import PostIdPage from '@/pages/PostIdPage'
import {createRouter} from 'vue-router'
import { createWebHistory } from 'vue-router'
const routes = [
    {
        path: '/',
        component: Main    
    }, 
    {
        path: '/posts',
        component: PostsPage    
    },
    {
        path: '/about',
        component: About    
    },
    {
        path: '/posts/:id',
        component: PostIdPage,
        name: 'PostIdPage',
        props: true  
    }
];

const router = createRouter({
    routes, 
    history: createWebHistory(process.env.BASE_URL),
})

export default router;

Comments

[Вадим]

Если я всё верно понял, то Вы хотите контент поста из одной страницы прокинуть через пропс на другую, но это так не делается.
Целевая страница сама должна запрашивать контент поста, брав id поста из параметров урла.

Если Вы уже запросили всю информацию о посте где-то ранее, до открытия страницы самого поста, то чтобы не повторять запрос(хотя возможно это наоборот нужно делать, если важна актуальность) информация должна браться либо из кеша, либо из какого-то "общего" хранилища. Условно vuex.

[wazowskiMarik]

Вадим, спасибо за развернутое объяснение. До vuex еще не дошел (в процессе обучения), думал, что можно все данные получить аналогично id.

[wazowskiMarik]

Вадим, нашел такой вопрос по этой теме https://qna.habr.com/q/614325
У автора разве не такая же ситуация?

[Вадим]

wazowskiMarik, а, ну, в целом да. Подзабыл про это в меру крайне редкого использования

[Вадим]

wazowskiMarik, но в реальной разработке обычно данные о товаре запрашивает все же страница товара, а в каталоге общая краткая информация