Vue.js 中navBar组件数据刷新：监听路由变化

本文将介绍如何在 Vue.js 应用中，让 navBar 组件能够在路由跳转时实时显示对应路由的数据。具体来说，我们会使用 computed 属性监听当前路由对象，并将路由配置中的 meta 属性用于传递信息。

1. 在navBar组件中使用computed属性监听当前路由对象

在 navBar 组件的 template 中，我们可以使用 computed 属性来获取当前路由对象的 meta 属性，例如：

<template>
  <div>
    <h1>{{ currentRouteTitle }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    currentRouteTitle() {
      return this.$route.meta.title
    }
  }
}
</script>

这段代码中，我们定义了一个名为 `currentRouteTitle` 的 computed 属性，它返回当前路由对象的 `meta.title` 属性的值。在 template 中，我们可以使用 `{{ currentRouteTitle }}` 来显示该值。

2. 在路由配置中给每个路由对象设置meta属性

为了在路由跳转时能够传递数据到 navBar 组件，我们需要在路由配置中为每个路由对象添加 `meta` 属性，用于描述该路由的一些元数据，例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于我们'
    }
  }
]

在上面的代码中，我们为每个路由对象都设置了 `meta` 属性，其中包含一个 `title` 属性，用于描述该路由的标题。当路由跳转时，navBar 组件的 `currentRouteTitle` 属性会自动更新，从而刷新显示的数据。

通过以上步骤，我们就可以实现一个简单的 navBar 组件，它能够在路由跳转时实时显示对应路由的数据。您可以根据自己的需求添加其他 meta 属性，例如描述页面描述、关键词等信息。