0

Im facing a problem for my VUE app, Im using the vue Router to navigate to my component

In my Header component I use router-link to navigate to a Home component

The problem is : In my Header component I would like a checkBox (a boolean variable) that change the content of my Home component (rendered in the router-view) like a v-if that would check the boolean variable in the Header

Here is my App.vue template I was trying to solve the problem through emits but Im Kinda stuck for passing data inside a component (inside the router-view)

<template>
  <div class="content">
    <HeaderComponent @eventCheckBox="handleCheckBox" />
    <router-view />
    <FooterComponent />
  </div>

Do you guys have already faced this issue, is there a way to do it the classic way or should I try plugins like Portal or Teleport ?

JEFFERRRRR
  • 1
  • 1

2 Answers2

0

Portal and Teleport are the same, just a different name (teleport in Vue3, being the official name).

As of the rest of the question, this explains it very well: https://stackoverflow.com/a/49702934/8816585

Mainly, you need to see if you need to use a store like Pinia (recommended one) and Vuex. Most of the time, you could use a parent/child relationship. Here is another article explaining when you would need something like that: https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/#alternatives-to-storing-data-in-vuex

In Vue3, you could even not use a store and rely solely on the singleton pattern + composables (again, a lot of articles are available for that one).

TLDR: use your Vue devtools and inspect the state flowing.
If you need more, reach for more powerful tools.

kissu
  • 40,416
  • 14
  • 65
  • 133
0

Thank you Dr Kissu, I will follow your advices and get to know Pinia (it looks awsome), but for my problem I manage to do it this way :

I Made another home component 'home-2', then in my header component, when I click on my checkBox it calls a function in which I check the current route.fullPath and then I redirect the user with route.push()

    goHome(){

   if (this.$route.fullPath ==='/home' || this.$route.fullPath ==='/' ){
        this.$router.push('/home-2');
      }
    },
JEFFERRRRR
  • 1
  • 1