vue-router 关于子路由页面给组件传数据的问题

Question

问题描述

项目用vue-router写了路由，一级路由和二级路由都用到了同一个子组件，目前一级路由是能传数据给子组件，但是点击到二级路由的时候显示的依然是一级路由的数据

相关代码

路由代码：

  // 分享标
    {
      path: '/share',
      name: 'share',
      component: share,
      children: [
        {
          path: 'shareInfo', // 分享规则
          name:'shareInfo',
          component: shareInfo
        }
      ]
    },

一级路由 /share 页面：

<template lang="html">
  <div class="">
      <HeaderBar :headerBar="headerBar"/>
  </div>
</template>

<script>
import HeaderBar from '@/components/common/headerBar.vue'

export default {
  name:'Share',
  components: {
    HeaderBar,
  },
  data() {
    return {
      headerBar: {
        title: '分享有礼',
        imgUrl: require('../../assets/images/doubt.png'),
        path: 'shareInfo',
        params: {
        },
        goBack:true,
        showIcon:true
      }
    }
  }
}
</script>

<style lang="css">
</style>

二级路由 /share/shareInfo 页面代码：

<template lang="html">
  <div class="">
      <HeaderBar :headerBar="headerBar"/>
  </div>
</template>

<script>
import HeaderBar from '@/components/common/headerBar.vue'

export default {
  name:'ShareInfo',
  components: {
    HeaderBar,
  },
  data() {
    return {
      headerBar: {
        title: '加息规则',
        imgUrl: '',
        path: '',
        params: {
        },
        goBack:true,
        showIcon:false
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>

子组件 headerBar 代码：

<template lang="html">
<div class="">
  <div class="header-bar">
    <div class="goBack" @click="goBack" v-if="headerBar.goBack">
      <img src="../../assets/images/goBack.png" alt="">
    </div>
    <div class="header-bar-title">
      {{headerBar.title}}
    </div>
    <router-link tag="div" :to="{ name: headerBar.path, params: headerBar.params }" class="header-bar-icon" v-if="headerBar.showIcon">
      <img :src="headerBar.imgUrl" alt="">
    </router-link>
  </div>
</div>
</template>

<script>
export default {
  name: 'HeaderBar',
  data() {
    return {
      headerBar: this.$attrs.headerBar
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1);
    }
  }
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

我想实现的是一级路由和二级路由每个路由显示自己的title值，但是目前到二级路由显示的仍然是一级路由的title，整个headerBar都没有任何变化。

Answer 1

你这不科学啊，亲测不存在问题

Answer 2

vuex啊。