VUE根据路由跳转改变头部导航栏文字

效果图

步骤如下：

1.在router/index.js路由文件通过定义每个页面中name的值来定义顶部导航栏的文字

{
      name:"琴房管理系统",
      path:"/myHome",
      component:() => import("../page/common/myHome.vue")
}

2.父组件传值

2.1.在父组件APP.vue中向顶部导航栏组件tab-bar.vue传递要显示的文字

引入子组件

<script>
  import TabBar from "./components/tab-bar";
export default {
  name: 'App',
  components: {TabBar}
}
</script>

在html中调用子组件并传递$router.name即路由文件中定义的name

<tab-bar v-bind:name="$route.name"></tab-bar>

2.2.在子组件tab-bar.vue中获取父组件传递的值

<script>
export default {
  props:['name']
}
</script>

在html中显示顶部导航栏的文字

<span>{{name}}</span>