title: Vuejs : Rendering components conditionally based on route
body: <p>Some of the components needs to be hidden for particular Routes. I was able to achieve that using watcher for route change found from this SO question - <a href="https://stackoverflow.com/questions/46402809/vuejs-event-on-route-change">Vuejs: Event on route change</a>. I don't  want to show header and sidebar in customizePage ( route - /customize ). But there is a problem when I do a hard reload from that particular page. That doesn't execute the watch and hence the it fails. The solution I found was having it also in mounted(), so that it executes also on reload.</p>
  <p>But having the same function in mounted and watcher looks weird. Is there a better way to do it ?</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;TrialBanner v-if=&quot;$store.state.website.is_trial&quot;/&gt;
          &lt;div class=&quot;page-body-wrapper&quot; :class=&quot;{ 'p-0' : isCustomizePage}&quot;&gt;
              &lt;Sidebar :key=&quot;$store.state.user.is_admin&quot; v-if=&quot;!isCustomizePage&quot;/&gt;
              &lt;div class=&quot;main-panel&quot; :class=&quot;{ 'm-0 w-100' : isCustomizePage}&quot;&gt;
                  &lt;Header v-if=&quot;!isCustomizePage&quot;/&gt;
                  &lt;div class=&quot;content-wrapper&quot; :class=&quot;{ 'p-0' : isCustomizePage}&quot;&gt;
                      &lt;router-view :key=&quot;$store.state.websiteId&quot;&gt;&lt;/router-view&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  mounted() {
    if(this.$route.path == '/customize') {
       this.isCustomizePage = true;
    } else {
       this.isCustomizePage = false;
    }
  },
  watch: {
    $route (to, from){
       if(this.$route.path == '/customize') {
         this.isCustomizePage = true;
       } else {
         this.isCustomizePage = false;
       }
    }
  }
  </code></pre>