如何解决Vue.js尝试在某些路线上禁用导航栏和页脚栏的全局组件
这是在特定路线上应将标题替换为另一栏时使用的代码。
HeaderBar代码:
<v-app-navbar>
<header v-if="DesktopHeader">
content
</header>
<header v-if="otherHeader">
content
</header>
</v-app-navbar>
mounted () {
if (this.$nuxt.$route.path === '/page') {
this.otherHeader = true
this.DesktopHeader = false
} else {
this.DesktopHeader = true
this.otherHeader = false
}
}
默认布局代码:
<template>
<v-app dark>
<HeaderBar></HeaderBar>
content
<FooterBar v-show="FooterHide"></FooterBar>
</v-app>
</template>
this.$route.path === '/page' ? this.FooterHide = false : this.FooterHide = true
这在localhost上有效,但在部署它时无效。
解决方法
尝试将this.$route.path
替换为this.$nuxt.$route.path
。
我也建议这样写:
this.FooterHide = this.$nuxt.$route.path === '/page' ? false : true
甚至
this.FooterHide = this.$nuxt.$route.path !== '/page'
,
我解决了这个问题,HeaderBar部分是正确的FooterBar部分无法正常工作。所做的与我使用HeaderBar相同,并且正在工作。也没有在部署时注意到路由从'/ page'变为'/'page/'。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。