Javascript 如何从Vue中的子组件更改和渲染源阵列

我在呈现给模板的父组件中有一个数组，我需要当我单击指向具有动态属性id的vue路由器的链接时，我打开了一个新组件，其中只有与id匹配的数组元素。我的代码不起作用。 父组件：

<template>
    <div>
        <button @click="addPost">Add</button>
        <div v-for="item, index in arr" :key="item.id">
            <p>{{item.title}}</p>
            <router-link :to="'/blog/' + item.id">Link</router-link>
        </div
        <router-view :arr="arr"></router-view>
    </div>
</template>

export default {
    import Post from './components/Post'
    components: {
        'app-post': Post
    },
    data() {
       return {
           arr: []
       }
   },
   methods: {
       addPost() {
           this.arr.push({
                title: this.title,
                id: Math.Random()
           })
       }
   }
}

<template>
    <div v-for="item, index in arr" :key="index">
        <p>{{item.title}}</p>
    </div>
</template>

export default {
   props: {
       arr: Array
   },
   created() {
       return this.arr.find(item => {
           return item.id === this.$route.params.id
       })
   }
}

添加
{{item.title}

链接
{
return item.id==this.$route.params.id
})
}
}

您可以像这样在路由器链接中使用参数

<router-link :to="{ name: 'blog', params: { id: ${item.id}}}">User</router-link>

---

请考虑添加适当的。你希望实现什么还不清楚。

   let paramID =  this.$route.params.id