vue3 多级路由跳转后无法正常加载页面

本人刚接触vue3，想问一个关于多级路由嵌套的问题。在使用三级路由的过程中遇到一个问题。即当从二级路由跳转到三级路由的时候，路径正常跳转到了三级路由的路径，但是页面同时把二级路由和三级路由的内容都加载出来了。三级路由页面内的组件出现在了二级路由页面组件的下方。请问这种情况要如何解决

这才是正常的逻辑，要先有一级，才有二级，随后有三级。

【相关推荐】

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7512530
这篇博客也不错, 你可以看下本地前端项目可以请求服务器后端接口,把vue部署到服务器不能调用线上的后端接口
您还可以看一下马金聚老师的Vue全家桶技术+商城项目实战+源码解析课程中的 03 全局组件的创建和使用小节, 巩固相关知识点
除此之外, 这篇博客: Vue实现跨页面传数据（从一个页面选择内容带回原页面）中的点击添加按钮打开一个弹窗，弹窗中是要添加的数据，选择好数据带回当前页面展示，这个问题对于我一个出入职场的后端小白来说实现起来有些困难。部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
经过查找和寻求帮助最后终于搞定了这个问题，上代码
下面是原页面的弹窗开关
```
<DialogHouseQuery //这是一个自定义的弹窗页面
      :visible="dialogHouseQueryVisible"
      :popcustomerid="form.customerid"
      :pophouselist="this.selectListtoquery"
      @close="dialogHouseQueryVisible = false"
      @select="selectHouse" //这个是实现跨页面传数据的关键方法
    />
```
弹窗页面的方法，通过父页面弹窗开关上的@select方法绑定另一个页面的方法，通过下面的方式可以调用另一个页面的方法，括号中的第一个参数就是绑定的select方法，第二个参数是我在弹窗页面中选择好的数据（根据你们自己的需求去填充数据就好），这个方法绑定到弹唱页面的选择按钮上，点击按钮时就会把this.selectedList带回上一个页面。
```
selectHouseOK() {
      this.$emit("select", this.selectedList);
    }
```
最后在原页面弹窗开关上绑定的select方法的实现里接收带回的数据即可
```
selectHouse(houses) {
      this.selectList = houses;
    },
```

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^