Javascript 根据用户所在的页面更改导航组件

我正在vue应用程序中使用透明导航栏。其目的是根据用户所处的页面，提供不同颜色的链接。我使用的是

vue路由器

和一个单独的导航栏（导航）组件

我对不同的页面有不同的背景颜色，例如主页有深灰色背景，而联系人页面有白色背景，导航栏是固定顶部的，所以我希望在页面背景为浅时有深色的导航栏链接，反之亦然

这是如何在主页和联系人页面上使用组件

Home
 -navbar
 -hero
 -content
 -footer

Contact
 -navbar
 -contact form
 -footer

---

那么，有没有一种方法可以告诉navbar在联系人页面和主页上使用不同的链接颜色？

如果您使用的是

vue router

，则可以通过变量访问用户所在的当前路由：

this.$route.path

。例如，如果用户在回家路线上，变量中的值可能为：

/Home

您可以使用此选项动态更改导航栏的颜色：

//in your navbar.vue (navbar component)

<template>
   <div v-bind:class="{color: navBarColor}">
   </div>
</template>


<script>
export default {
   computed: {
      navBarColor() {
         if (this.$route.path === "/home") { // if it is a dark route
            return "#fff"; // basically any light color you want
         }
         return "#000"; // the dark color of your choice.
      }
   }
}
</script>

//navbar.vue
导出默认值{
计算：{
navBarColor（）{
返回此。$route.meta.navBarColor
}
}
}

---

这两种方法中的任何一种都应该对您有所帮助：）

您能帮助我理解更改链接颜色的含义吗？你只想用一种方式突出显示与用户当前路线对应的链接吗？@SerShubham我对不同的页面有不同的背景颜色，例如主页有深灰色背景，而联系人页面有白色背景，导航栏固定在顶部，因此，我想有一个深色的导航栏链接时，网页的背景是轻，反之亦然。我理解。让我帮你解决一个问题：）

//router.vue

const router = new VueRouter({
  routes: [
    {
      path: '/home', //the one with the dark background
      component: Home,
      meta: { navBarColor: '#fff' }
    }
  ]
});

// navbar.vue


<template>
   <div v-bind:class="{color: navBarColor}">
   </div>
</template>


<script>
export default {
   computed: {
      navBarColor() {
        return this.$route.meta.navBarColor
      }
   }
}
</script>