我在一个由 3 部分组成的组件中使用 Vue.js 应用程序和 vue-router:
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 更改为:
v-if="this.$route.name === 'whatever-your-route-name-is'" // 'landing' according to your comment
关于vue.js - 如何仅在某些 Vue.js 组件上显示导航栏元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52406230/