Question

我有一个用布尔玛制成的自定义导航栏，并且我正在使用Nuxt.js创建我的应用程序。问题是我想将导航栏固定在顶部，但仅在某些视图上固定。例如，我想在索引页面以及所有其他连接到索引的页面上进行导航，但是我不想在登录页面和注册页面上进行导航。

在布尔玛文档中，它说：

将相应的has-navbar-fixed-top或has-navbar-fixed-bottom修饰符添加到<html>或<body>元素中，以为页面提供适当的填充

如果我在app.html文件中执行此操作，则所有视图的顶部都会有填充。有没有一种方法可以覆盖has-navbar-fixed-top属性以在不需要它的视图上取消设置它？还是可以以某种方式仅将其设置为应具有的组件/页面？

Answer 1

所有您需要做的是创建一个充满路径的数组（pagesWithNavBar）和一个计算方法（shouldHaveNavBar），该方法根据url中的当前路径是否匹配数组中的任何项（pagesWithNavBar）返回true或false，最后返回在head方法中添加一个check方法，以检查我们当前是否在页面中，数组中包含路径！

.vue文件-最有可能是您的布局->脚本标签

export default {
    data() {
      return {
        pagesWithNavBar: [
          "/login", "/signup" // add here all your paths where u wish to have your navbar
        ] 
      } 
    },
    computed: {
      shouldHaveNavBar() {
        return this.pagesWithNavBar.includes(this.$route.path)
      }
    },
    head() { // since nuxt.js uses vue-meta to update the document head and meta attributes 
             // you can also use it for your own good which means adding meta tags or editing
             // the attributes of a body tag! you can learn more here
             // https://nuxtjs.org/guide/views/#html-head
             // or here
             // https://github.com/declandewet/vue-meta#recognized-metainfo-properties
      return { 
        bodyAttrs: { 
          class: this.shouldHaveNavBar ? "has-navbar-fixed-top" : ""
        }
      }
    }
}

如何使用布尔玛仅在Vue中的某些元素上设置has-navbar-fixed-top属性？

1 个答案: