如何仅在某些 Vue.js 组件上显示导航栏元素？答案

【问题标题】：How to show navbar element only on certain Vue.js components?如何仅在某些 Vue.js 组件上显示导航栏元素？
【发布时间】：2019-02-23 15:36:21
【问题描述】：

我在一个 3 部分组件中使用带有 vue-router 的 Vue.js 应用程序：

App.vue：

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

<NavbarComp/> 包含一个登录按钮，我希望它只出现在登录页面上：

<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>

我尝试在商店中定义一个section，并将该部分定义为每个组件上的计算属性：

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

但未能成功。所以感谢你的提示。

【问题讨论】：

试试v-if="this.$route.name === 'login-route-name'"
这行得通。但实际上应该是 v-if="this.$route.name === 'landing'" 。请回答，我会接受。谢谢！
很高兴为您提供帮助:)

标签： vue.js vue-component vue-router

【解决方案1】：

将按钮上的v-if更改为：

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

【讨论】：