CODEWITHSUNDEEP
vue.js
user892134
user892134

Reputation: 3224

Vue JS conditional rendering defined by url?

I have component named head.vue

 <b-navbar toggleable="lg" type="dark">

    <b-navbar-brand href="#"><img src="logo.png" class='logo'/></b-navbar-brand>

  </b-navbar>

What i want to do is only show logo on certain pages e.g.(homepage,about,privacy) and if not homepage i want to show title, see example:

<b-navbar toggleable="lg" type="dark">

        <b-navbar-brand href="#"><h1>Lorem Ipsum</h1></b-navbar-brand>

      </b-navbar>

How do i do this with conditional rendering? I can do this with components but want to know if possible to do on same component. For example:

 <b-navbar toggleable="lg" type="dark">
        <b-navbar-brand href="#" v-if="homepage"><h1>Lorem Ipsum</h1></b-navbar-brand>
        <b-navbar-brand href="#" v-else><h1>Lorem Ipsum</h1></b-navbar-brand>
</b-navbar>

Upvotes: 0

Views: 864

Answers (1)

Phil
Phil

Reputation: 164733

Add some extra data to the routes you want to show the logo on, eg

routes: [{
  path: '/homepage',
  component: HomePage,
  meta: { showLogo: true }
}, {
  path: '/about',
  component: About,
  meta: { showLogo: true }
}, {
  path: '/some-other-page',
  component: SomeOtherComponent
  // no meta required here
}]

Then in your head component, you can simply use

<b-navbar toggleable="lg" type="dark">
  <b-navbar-brand href="#">
    <img v-if="showLogo" src="logo.png" class='logo'/>
    <h1 v-else>Lorem Ipsum</h1>
  </b-navbar-brand>
</b-navbar>

computed: {
  showLogo () {
    return this.$route.meta.showLogo
  }
}

See https://router.vuejs.org/guide/advanced/meta.html

Upvotes: 1

Related Questions