VueJS孩子重装父母

Question

我有一个vue-router项目，其中包含父项，子项，子项设置。

route.js

{ path: '/Student', component: Student,
           children: [
               { path: 'CustomTasks', component: CustomTasks,
                children: [
                    { path: ':groupId', name: 'student.task.show', component: SubjectTask },
                ]
               },
           ]
       }

Student.vue（父母）

<router-link to="/Student/CustomTasks"></router-link>

        <div class="w-100">
                <router-view :key="this.$route.params.groupId"></router-view>
        </div>

CustomTasks.vue（第一个孩子）

<router-link to="/Student/CustomTasks/2"></router-link> 
<router-link to="/Student/CustomTasks/3"></router-link>

            <div class="w-100">
                    <router-view></router-view>
            </div>

SubjectTask.vue（第二个孩子）

<h3 class="col-11">What's New{{ this.$route.params.groupId }}...</h3><br>

问题：现在它们都可以使用，但是当您单击“第一个孩子”上的路由器链接时，它会重新加载第一个孩子和第二个孩子！而不是仅加载第二个孩子，您如何停止此重新加载？

Answer 1

您有两个路由器视图标签似乎很奇怪。 通常，您将在具有菜单和导航链接的app.vue中创建模板，然后将路由器视图转到页面的“正文”，并将任何页面渲染到该区域。

“子”术语听起来像是另一子页面的子页面，嵌套路由器也暗示了这一子页面。但是，所有组件看起来都是分开的。如果您需要更多细节，也许可以提供屏幕截图？

如果您只是在扩展内容，选择第一层，显示第二层，选择第二层显示第三层，那么您可能可以使用v-if或v-show，可能涉及调用服务器以获取数据，但如果没有确切的问题或无法解决的问题，很难发表评论。

Answer 2

只是发现我有两个具有相同ID的路由器视图键。更改名称就可以了！

<router-view :key="this.$route.params.groupId" :pageName="pagename"></router-view>
<router-view :key="this.$route.params.CustomGroupId" :pageName="pagename"></router-view>