vue 嵌套路由 父页面定义一个文本，切换子页面时文本变成子页面的文本

可以通过在父路由组件中使用 `<router-view>` 标签来渲染子路由组件，然后在父路由组件中定义一个变量来存储文本，通过子路由组件的路由钩子函数来修改这个变量，从而实现文本的切换。

具体实现步骤如下：

1. 在父路由组件中定义一个变量来存储文本，例如：

<template>
  <div>
    <h1>{{ text }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '父页面文本'
    }
  }
}
</script>

2. 在子路由组件中通过路由钩子函数来修改父路由组件中的文本变量，例如：

<script>
export default {
  mounted() {
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.text) {
        this.$parent.text = to.meta.text;
      } else {
        this.$parent.text = '父页面文本';
      }
      next();
    });
  }
}
</script>

3. 在子路由组件中定义路由元信息（meta）来存储子页面的文本，例如：

<script>
export default {
  meta: {
    text: '子页面1文本'
  }
}
</script>

这样，在切换子页面时，父页面的文本就会自动变成子页面的文本。