请问 router-view 视图渲染出来的组件里面还能将结果渲染到当前这个视图吗？

Question

我用的是 vue 2 版本的，部分关键代码如下：

路由js如下：

export default new VueRouter({
  routes: [
    /*header部分*/
    {
      path: "/set",
      components: { mainBody: setIndex },
      children: [
        {
          path: "myInfo",
          components: {
            mainBody: () => import("@/pages/set/myInfo.vue"), // 渲染到具名视图，文件位置没有写错
          },
        },
      ],
    },
  ],
});

app.vue 代码如下:

<template>
  <div id="app">
    <template v-if="!isEmptyObject($store.state.user)">
      <diaryHeader/>
      <diaryMainBody/>
    </template>
    <template v-else>
      <login v-if="$store.state.curModule === 'login'" @togglePage="togglePage"/>
      <privacy-policy v-if="$store.state.curModule === 'privacyPolicy'"/>
    </template>
  </div>
</template>

diaryHeader.vue代码如下：

<template>
  <div id="header">
    <ul>
      <li><router-link active-class="curModule" to="/set">设置</router-link></li>
    </ul>
  </div>
</template>

diaryMainBody.vue代码如下：

<template>
  <div id="mainBody">
    <router-view name="mainBody"></router-view>
  </div>
</template>

<script>
export default {
  name: 'mainBody',
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>

setIndex.vue代码如下：

<template>
  <div id="setIndex">
    <ul>
      <li><router-link to="/set/myInfo">我的信息</router-link></li>
    </ul>
    <!--
    我如果把路由改为：{path: 'myInfo', component: myInfo},
    然后再这里添加上：<router-view></router-view>
    是可以显示 myInfo.vue 这个文件的内容的，但是我上面那个id="setIndex"部分又没法删掉
    -->
  </div>
</template>

<script>
export default {
  name: 'setIndex',
  props: {
    msg: String
  }
}
</script>

<style scoped>
#setIndex>ul{}
#setIndex>ul>li{padding:0.5rem 0.5rem;border-bottom:1px solid #ccc;}
</style>

我希望点击“我的信息”也能更新 name=“mainBody”这块的视图，现在的问题是点了没反应，我问文心一言，他说没法这样搞，我问chatgpt，他说可以这样搞，但实际到我这里就不行，想请教下有大佬帮我看看吗？小弟跪谢。

其实我这个效果应该就相当于a链接，点击完后替换当前页面的所有内容，但现在来看貌似router-link只能更新当前页面的局部内容一样。