Vue JS conditional rendering defined by url?

Question

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>

I am not getting what you mean by "_I can do this with components but want to know if possible to do on same component._" — palaѕн, Jun 05 '20 at 05:12
i mean i can just create a component showing only title and not logo. But i want to know if i can do this with conditional rendering? — user892134, Jun 05 '20 at 05:13
You are already using [conditional rendering](https://vuejs.org/v2/guide/conditional.html) with v-if and v-else. — palaѕн, Jun 05 '20 at 05:15
but how do i use conditional rendering to see what page i am on e.g. `localhost/homepage` or `localhost/about`? — user892134, Jun 05 '20 at 05:16
This is a duplicate question then: [How to get current name of route in Vue?](https://stackoverflow.com/a/53126892) — palaѕн, Jun 05 '20 at 05:18
this doesn't answer my question, how do i implement with `v-if` and `v-else`? — user892134, Jun 05 '20 at 05:20

Phil · Accepted Answer · 2020-06-05T05:27:25.450

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

Vue JS conditional rendering defined by url?

1 Answers1