How to show navbar element only on certain Vue.js components?

Question

I'm using Vue.js app with vue-router in a 3-part component:

App.vue:

<template>
  <div id="app">
    <head>
    </head>
    <NavbarComp/>
    <div>
      <div class="middle">
        <router-view/>
      </div>
    </div>
    <FooterComp/>
  </div>
</template>

The <NavbarComp/> contains a login button, which I'd like to appear only on landing page:

<template>
<div>
<nav>
          <router-link to="/" >
          <h3>My Shining app </h3>
          </router-link> 
          <router-link to="/login">
            <button  v-if="section='landing'"> Login</button>              
          </router-link>
</nav>
</div> 
</template>

I tried to define a section in the store, and define the section as a computed property on each component:

  section () {
    this.$store.section = 'login'; 
  }

but could not succeed. So appreciate your hints.

This works. but actually it should be v-if="this.$route.name === 'landing'" . Please asnwer and I'll accept. Thanks! — Babr
– Babr, Commented Sep 19, 2018 at 12:55

Luke Ramsden · Accepted Answer · 2018-09-19 12:56:48Z

5

Change the v-if on the button to be:

v-if="this.$route.name === 'whatever-your-route-name-is'" // 'landing' according to your comment

answered Sep 19, 2018 at 12:56

Luke Ramsden

7345 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How to show navbar element only on certain Vue.js components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related