文章/答案/技术大牛

发布

社区首页 >问答首页 >如何仅在某些Vue.js组件上显示导航条元素？

问如何仅在某些Vue.js组件上显示导航条元素？
EN

Stack Overflow用户

提问于 2018-09-19 12:47:53

回答 1查看 1.2K关注 0票数 1

我在一个由3部分组成的组件中使用Vue.js应用程序和vue-路由器：

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'; 
  }

但没能成功。所以感谢你的暗示。

vue.js

vue-component

vue-router

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-19 12:56:48

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

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52406230

复制

相似问题

问如何仅在某些Vue.js组件上显示导航条元素？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅在某些Vue.js组件上显示导航条元素？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅在某些Vue.js组件上显示导航条元素？
EN