vue---隐藏登录页面导航栏,登录成功跳转页面出现导航栏

问题描述:在登录页面显示了底部导航栏,那么如果控制使得登录界面不存在导航栏,登录成功后跳转页面才显示导航栏?

vue---隐藏登录页面导航栏,登录成功跳转页面出现导航栏

 

解决方法:(1)在父组件App.vue的底部导航栏组件渲染标签处引入<v-show>或者<v-if>标签实现导航栏的显示与隐藏状态【<bottom-nav v-show="showNav"></bottom-nav>】,首先设置一个showNav标志,未登录时showNav值为false【showNav: false】,导航栏不显示。(2)在子组件Login.vue页面,当登录成功,设置showNav值为true,【this.$parent.showNav = true;】导航栏显示。

vue---隐藏登录页面导航栏,登录成功跳转页面出现导航栏    vue---隐藏登录页面导航栏,登录成功跳转页面出现导航栏

(3)另外,在登录成功之后跳转的每一个页面中的【created】中设置showNav值为true

vue---隐藏登录页面导航栏,登录成功跳转页面出现导航栏