Vue.js 当用户导航到特定路由路径时更新父数据

我是VueJs新手，尝试使用Vue路由设置web应用程序，并希望在用户导航到特定URL时更新

样式，无论是直接使用“URL栏”还是“导航栏”。在本例中，我们有一个父组件，它包含

高度\u状态

数据和模板上的一些

<header :class="headerClass"></header>

我已经用

$emit

技术完成了“导航栏”部分，它工作得很好，但是我尝试在

创建的

生命周期挂钩上使用它，以便在创建

/home

路由时更新标题，但事件侦听器不会到达父组件。 我怎样才能解决这个问题？有更好的方法吗？ 请参阅下面的代码：

Parent_component.vue

---

home.vue

你好
导出默认值{
姓名：'家'，
已创建：函数（）{
返回此值。$emit（“高度大小控制”，true）
}
}

为什么不在

路由

或

路由名称

上尝试类绑定，例如：

<div :class="{'height_status': this.$route == '/home'}">Header</div>

标题

或

标题

为什么不在

路由

或

路由名称

上尝试类绑定，例如：

<div :class="{'height_status': this.$route == '/home'}">Header</div>

标题

或

标题

您还可以更改路由器：

router.js

  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
      headerClass: 'head-h-s'
    }
  }

在您的组件中

父组件.vue

computed: {
  headerClass() {
    return this.$route.meta.headerClass
  }
}

现在，headerClass在模板中可用

<header :class="headerClass"></header>

---

您还可以更改路由器：

router.js

  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
      headerClass: 'head-h-s'
    }
  }

在您的组件中

父组件.vue

computed: {
  headerClass() {
    return this.$route.meta.headerClass
  }
}

现在，headerClass在模板中可用

<header :class="headerClass"></header>

---

正如@kcsujeet所说，类绑定是实现这一点的好方法。在这种情况下，我们需要查看条件

this.$route.path

。如果值等于

/home

选择

'head-h-m

，否则选择

.head-h-s

<header class="head-sec" :class=" this.$route.path == '/home' ? 'head-h-m' : 'head-h-s'">

---

正如@kcsujeet所说，类绑定是实现这一点的好方法。在这种情况下，我们需要查看条件

this.$route.path

。如果值等于

/home

选择

'head-h-m

，否则选择

.head-h-s

<header class="head-sec" :class=" this.$route.path == '/home' ? 'head-h-m' : 'head-h-s'">

---

好主意，类绑定是正确的答案，但这个条件对我不起作用，因为类名为

head-h-s

和

head-h-m

。另外，

this.$route

可能类似于

this.$route.path

，具体取决于条件。所以我编辑了你的答案来匹配这个问题。感谢@kcsujeetGood idea，类绑定是正确的答案，但这个条件对我不起作用，因为类名为

head-h-s

和

head-h-m

。另外，

this.$route

可能类似于

this.$route.path

，具体取决于条件。所以我编辑了你的答案来匹配这个问题。谢谢@kcsujeet