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ѕн
– palaѕн, Commented Jun 5, 2020 at 5: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
– user892134, Commented Jun 5, 2020 at 5:13
You are already using conditional rendering with v-if and v-else. — palaѕн
– palaѕн, Commented Jun 5, 2020 at 5:15
but how do i use conditional rendering to see what page i am on e.g. localhost/homepage or localhost/about? — user892134
– user892134, Commented Jun 5, 2020 at 5:16

Phil · Accepted Answer · 2020-06-05 05:27:25Z

1

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

edited Jun 5, 2020 at 5:27

answered Jun 5, 2020 at 5:22

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS conditional rendering defined by url?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related