SweeTooth
@SweeTooth

Как передать props в компонент во Vue 3 через роутинг?

Возникла такая проблема при построение простенького приложения на чистом 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?
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
Ну вот прям так и передать: <router-view :posts="posts">. Говнокод, конечно. Уверены, что массив posts должен быть в корневом компоненте? Думаю, вам пора познакомиться с vuex.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы