时间戳

首页 > 解决方案 > VueJS子级重新加载父级

javascript - VueJS子级重新加载父级

问题描述

我有一个带有父、子、子设置的 vue-router 项目。

路由.js

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

学生.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>

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

在此处输入图像描述

标签： javascriptvue.jsvue-router

解决方案

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

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

如果你只是在做扩展内容，选择第一级，显示第二，选择第二显示第三，那么你可能可以使用v-if或v-show，可能会涉及到调用服务器来获取数据，但很难在没有确切问题或要解决的问题的情况下进一步评论。

推荐阅读