点击左侧菜单栏如何将内容显示在main主体中，而不是导航到新的页面

1.界面展示

如上图所示，在点击左侧菜单栏是，右侧主体内会相应变化

2.如何实现

（1）首先我们需要设置左侧菜单栏，给它添加一个点击事件（之前用router-link，我发现它会显示的和链接一样，并且会直接跳转到新页，所以这是我上网查到的写法），点击事件后面跟的是你要跳转的文件路由路径，将路由放到你要展示的位置

 <div>
     <el-menu-item index="1" @click="navigateTo('the-main')">
       <el-icon><IconMenu /></el-icon>
       <span>首页</span>
      </el-menu-item>
</div>



<el-main>
     <router-view />
</el-main>

（2）在<script lang="ts" setup>中写入

const navigateTo = (path: string) => {
  router.push({ path })
}

（3）重要的是路由的写法，在你的index.ts文件中

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: HomeView,
    children: [
      {
        path: '',
        name: 'Main',
        component: TheMain
      },
      {
        path: 'the-main',
        name: 'TheMain',
        component: TheMain
      },
      {
        path: 'the-content',
        name: 'TheContent',
        component: TheContent
      },
      {
        path: 'the-user',
        name: 'TheUser',
        component: TheUser
      }
    ]
  }
]

因为该模块我都写在了HomeView.vue文件里面，所以引用到的路由都属于HomeView的子路由，所以得写到children的里面，这样跳转才能成功

3.小结

我这部分内容用的是vue3和element-plus写的，所以别的版本不知道是否适用，另外这部分内容也是我一直调试出来的，如何有任何不对的地方，欢迎大家批评指正！