用户导航到特定路径时更新父数据

Question

我是VueJ的新手，它试图通过Vue-route设置Web应用程序，并且想在用户导航到特定URL时更新<header>样式，无论是直接使用“ URL栏”还是“导航栏”。在这种情况下，我们有一个父组件，其中包含height_status数据和模板上的某些<router-links>。

我已经使用$emit技术完成了“导航栏”部分，并且效果很好，但是随后我尝试在created生命周期挂钩中使用它，以便在{ {1}}路由已创建，但事件侦听器将不会到达parent_component。 我该如何解决？有更好的方法吗？ 请参见下面的代码：

Parent_component.vue

/home

---

router.js

<template>
  <div id="app">

    <router-link to="/home" @height_size_ctrl="change_height">Home</router-link>
    <router-link to="/about">About us</router-link>
    <router-link to="/contact">Contact us</router-link>

    <header :class="height_status ? 'head-h-s' : 'head-h-m'"></header>

    <router-view/>

  </div>
</template>

<script>
export default {
  name: "Parent_component"
  },
  data() {
    return {
      height_status: false
    }
  },
  methods: {
    change_height(h) {
      this.height_status = h
    }
  }
}
</script>

---

home.vue

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})

Answer 1

为什么不尝试对route或route name这样的类进行绑定：

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

或

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

Answer 2

您还可以更改路由器：

router.js

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

在您的组件中

Parent_component.vue

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

现在headerHeader在模板中可用。

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

Answer 3

正如@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'">

我们还可以使用route访问其他this.$route定义的属性。我建议看一下router.js文件。

routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }