Vue.js - hide a text on a page passed from App.vue

Question

I am really new to Vue. I have multiple pages such as App.vue , Waiting.vue , Reference.vue , Switch.vue and so on. The text defined on **App.vue** is passed along to other pages correctly. But now I dont want to display WELCOME text passed from App.vue to Waiting.vue page. Is there a way that I can hide WELCOME from Waiting.Vue page only?

App.vue

<div id="app">
 <b-container>
  <b-col lg="5">
    WELCOME
  </b-col>
 </b-container>
</div>

Waiting.vue

<div id="app">
 <p class="teamTitle">TEAMS ON DECK</p>
</div>

Ouput for Waiting.vue

WELCOME
TEAMS ON DECK

Answer 1

Let suppose that the Waiting page path is /waiting so you should do:

<div id="app">
 <b-container>
  <b-col lg="5" v-if="$route.path!=='/waiting'">
    WELCOME
  </b-col>
 </b-container>
</div>

Answer 2

I am assuming that App.vue is acting as parent component and has content that is visible in the page. That being the case, there are multiple ways of hiding information.

1. If you use a router and Waiting.vue is on a distinct route you can check for route params to selectively hide text. For eg in App.vue .

    <b-col lg="5" v-if=".this.$route.fullPath === '/waiting'"> WELCOME </b-col>

2. If you use global storage like Vuex, just set a variable within Vuex when Waiting.vue is loaded and set the variable to something else in other components

3. If you are having everything on a single page for any reason, pass a variable as prop and selectively hide the element (similar to [1])

   App.vue

    <Waiting:hide="true"/>

   Waiting.vue

    <b-col lg="5" v-if=":hide"> WELCOME </b-col> <:-- other code --> <script> export default { props, { default: false, type: Boolean, required: false } } </script>