Обновите родительские данные, когда пользователь переходит к определенному пути маршрута

Question

Я новичок в VueJs, пытаюсь настроить веб-приложение с Vue-route и хочу обновить стиль <header>, когда пользователь переходит к определенному URL, независимо от того, использует ли он «панель URL» напрямую или «панель навигации».».В этом случае у нас есть родительский компонент, который содержит height_status данные и некоторые <router-links> в шаблоне.

Я выполнил часть "панель навигации" с техникой $emit, и она работает хорошо, но потомЯ попытался использовать его на created ловушке жизненного цикла, чтобы обновлять заголовок всякий раз, когда создается маршрут /home, но прослушиватель событий не достигнет parent_component.Как я могу решить это?Есть ли лучший способ сделать это?Пожалуйста, смотрите код ниже:

Parent_component.vue

<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>

---

router.js

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
    }
  ]
})

---

home.vue

<template>
  <h1>hello</h1>
</template>

<script>

export default {
  name: 'home',
  created: function(){
    return this.$emit("height_size_ctrl", true)
  }
}
</script>

Answer 1

Вы также можете изменить маршрутизатор:

router.js

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

В вашем компоненте

Parent_component.vue

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

Теперь headerClass доступен в шаблоне.

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

Answer 2

почему бы вам не попробовать связывание классов на route или route name что-то вроде:

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

или

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

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
    }