Возникла такая проблема при построение простенького приложения на чистом Vue 3: Имеется главный компонент в котором лежит массив posts и есть компонент Home для роутинга, в котором в свою очередь лежит компонент post.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,700;1,400&display=swap"
rel="stylesheet"
/>
<!-- styles -->
<link rel="stylesheet" href="style.css" />
<title>Posts</title>
</head>
<body>
<div id="app">
<div class="container">
<router-view></router-view>
</div>
</div>
<!-- Vue -->
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
<script src="main.js"></script>
<!-- Vue router -->
<script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html>
main.js
const app = Vue.createApp({
data() {
return {
posts: [],
}
}
});
router.js
const home = {
props: ['posts'],
template:
/*html*/
`<h1 class="title">Latest posts</h1>
<div class="posts">
<post :posts="posts"></post>
</div>`
}
const routes = [
{path: '/', component: home},
]
const router = VueRouter.createRouter({
history:VueRouter.createWebHistory(),
routes
})
app.use(router)
Как мне передать из main.js в роут Home (который находится в route.js) массив posts через prop?
