Nuxt布局在每个路由上更新数据

要在Nuxt布局中每个路由上更新数据，可以使用Nuxt的asyncData方法和Vue的computed属性来实现。

首先，在layouts目录下创建一个自定义布局，例如layout.vue。在这个布局中，定义一个computed属性来获取需要更新的数据，例如：

<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <Nuxt />
  </div>
</template>

<script>
export default {
  computed: {
    pageTitle() {
      // 根据需要更新的数据逻辑来获取数据
      return 'Page Title';
    }
  }
}
</script>

然后，在每个页面组件中，使用asyncData方法来获取需要更新的数据，例如：

<template>
  <div>
    <h2>{{ pageContent }}</h2>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  asyncData({ app }) {
    // 根据需要更新的数据逻辑来获取数据
    const pageContent = 'Page Content';
    return { pageContent };
  }
}
</script>

这样，在每个路由上，布局的computed属性会根据asyncData方法返回的数据来更新。在页面组件中，可以直接使用通过asyncData返回的数据。

需要注意的是，asyncData方法只在服务端渲染期间运行一次，可以在页面加载时获取数据。而computed属性则会在每个路由切换时更新。

这样，每个路由都可以根据需要更新自己的数据，而且布局也会根据页面组件的数据更新。