当在VUE3中的特定页面中，有条件的渲染div类在负载上的div类

Question

我是Vue的新手，并且在加载页面时，我有一个由子组件管理的类和页面管理的类别的有条件渲染问题，

我有两个部分，一个组件（navbar）和页面（在我的情况下）。 通过添加或不是特定的类，我只想在主页上加载Navbar。

因此，我在纳维尔博尔模板中写了这部分：

<navbar class="normalclass" :class={transparent:istransparent}>Something</navbar>

：

export default {

    name: 'Navbar',
    data() {
        return {
            istransparent:false, // By default is false

        }

    }
}

在视图主页中

import { ref } from 'vue'
export default {
name: 'Home',
 
setup () {
    const istransparent = ref(true)
    return {
        istransparent
    }
}}
// I also tried to insert just this code but it doesn't change the result.
  setup () {
     return {
        istransparent:true
     }
  }

。

<Navbar />

<router-view />

<Footer />

js 我错了，最好的解决方案是做我需要的事情。

我问那些比我有更多经验的人寻求帮助。

##########编辑

###########

而不是使用要在单个组件（或在这种情况下）中读取的变量，例如Home.Vue，

我使用Vue-Router来找出我所处的页面。因此，由于我只希望在家中的透明标头，因此在navbar.vue组件中，我添加了此代码以说如果我在家中，则变量为真，因此我添加了所需的类。 在这里使用的代码：

在navbar.vue：

<navbar class="normalclass" :class= 
{transparent:isHome}>Something</navbar>

js：

export default {

    name: 'Navbar',
        computed: {
            isHome() {
                 return this.$route.name == 'Home' // Check if router name is 'Home' 
        
            }
         }

    }
}

我不知道这是最好的方法，但是它有效并且感觉稳定，而代码很少。为了知识，我与您分享。