Vue.js-在中更改路由后未从父组件中删除DOM元素

我在vue.js中遇到了一个一致的行为，并且找不到任何描述它的文档，我想知道的是这种行为是否符合预期

我正在使用vue.js 2.6.8、@vue/cli服务3.5.1和vue路由器3.0.1开发SPA

我的路线如下所示：

{
    path: '/Users',
    name: 'Users',
    component: Users,
    meta: {requiresAuth: true},
    children: [
        {
            path: 'New',
            component: NewUserModal,
            name: 'NewUserModal',
            meta: {requiresAuth: true},
        }
    ]
},
{
    path: '/Users/:id',
    component: User,
    name: 'User',
    meta: {requiresAuth: true}
}

<template>
    <my-list-component>
        <template #modal>
            <router-view/>
        </template>
    </my-list-component>
</template>

<template>
    <keep-alive>
        <router-view/>
    </keep-alive>
</template>

Users组件是一个用户列表，其中有一个路由器视图，用于呈现新的用户模式，如下所示：

{
    path: '/Users',
    name: 'Users',
    component: Users,
    meta: {requiresAuth: true},
    children: [
        {
            path: 'New',
            component: NewUserModal,
            name: 'NewUserModal',
            meta: {requiresAuth: true},
        }
    ]
},
{
    path: '/Users/:id',
    component: User,
    name: 'User',
    meta: {requiresAuth: true}
}

<template>
    <my-list-component>
        <template #modal>
            <router-view/>
        </template>
    </my-list-component>
</template>

<template>
    <keep-alive>
        <router-view/>
    </keep-alive>
</template>

一切都很好。那么，这是vue的预期行为吗？我错过什么了吗？更重要的是，我可以在更改路由之前等待DOM删除吗

谢谢你的时间和帮助

编辑1

为了更好地理解，my app.vue有一个保持活动状态，因此所有直接子项（例如用户列表等）不会在每次激活时向服务器发送请求。App.vue的结构如下所示：

{
    path: '/Users',
    name: 'Users',
    component: Users,
    meta: {requiresAuth: true},
    children: [
        {
            path: 'New',
            component: NewUserModal,
            name: 'NewUserModal',
            meta: {requiresAuth: true},
        }
    ]
},
{
    path: '/Users/:id',
    component: User,
    name: 'User',
    meta: {requiresAuth: true}
}

<template>
    <my-list-component>
        <template #modal>
            <router-view/>
        </template>
    </my-list-component>
</template>

<template>
    <keep-alive>
        <router-view/>
    </keep-alive>
</template>

通过这种方式，我首先将用户重定向到父组件，这样子组件的生命周期将完全执行，其DOM元素将被删除，然后用户将重定向到用户组件

---

到目前为止，100%的时间都在工作。

因此，当您路由到

用户/：id

时，组件实例将被重用。 对于任何

id

-根据文档

也许你能帮忙

e、 g:

更重要的是，我可以在更改路由之前等待DOM删除吗

---

因此，当您路由到

user/：id

时，组件实例将被重用。 对于任何

id

-根据文档

也许你能帮忙

e、 g:

更重要的是，我可以在更改路由之前等待DOM删除吗

---

“但是，如果我回到用户组件”，您可以尝试更改为

。显然，组件

User

是组件

Users

的子级。您可以将它添加到其中并检查吗？@Phil所有路由更改都是通过push发生的，例如：

this.$router.push（{name:'User'}）@varit05我可能错了，但事实并非如此。组件用户是用户列表，组件用户是单个用户的详细信息。用户不是子路由，因为它不依赖于用户组件，它实际上是一个完全不同的页面。如果我将用户添加为用户的子路由，我将不得不处理用户列表，该列表不应显示。“但是，如果我返回到用户组件”，您可以尝试更改为
。显然，组件
User
是组件
Users
的子级。您可以将它添加到其中并检查吗？@Phil所有路由更改都是通过push发生的，例如：
this.$router.push（{name:'User'}）@varit05我可能错了，但事实并非如此。组件用户是用户列表，组件用户是单个用户的详细信息。用户不是子路由，因为它不依赖于用户组件，它实际上是一个完全不同的页面。如果我将用户添加为用户的子路径，我将不得不处理用户列表，这不应该显示。我尝试了这种方法，不幸的是，当导航到那里时，NewUserModal的DOM元素仍然显示在用户组件中。从2017年发现这一点，不确定这是否真的是您所体验到的：yeap，我们最终还是在同一个地方。这就是我得到治疗的原因。后来我更新了一种新方法，这样做：
this.$router.push（{name:'Users}）；等待此消息。$nextTick（）；这是.$router.push（{name:'User'}）
我尝试了这种方法，但不幸的是，当导航到那里时，NewUserModal的DOM元素仍然显示在Users组件中。从2017年发现了这一点，不确定这是否真的是您所体验到的：是的，我们最终还是在同一个地方。这就是我得到治疗的原因。后来我更新了一种新方法，这样做：
this.$router.push（{name:'Users}）；等待此消息。$nextTick（）；这是.$router.push（{name:'User'}）