Vuejs 组件重用导航更改 - 寻求澄清答案

【问题标题】：Vuejs component reuse on navigation change - clarification soughtVuejs 组件重用导航更改 - 寻求澄清
【发布时间】：2020-01-02 15:20:23
【问题描述】：

在以下示例中，如果用户从/user/foo 导航到/another_page，然后导航到/user/bar，是否会重用User 组件？

const User = {
   template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

Vue 路由器手册说...

在使用带参数的路由时需要注意的一点是，当用户从 /user/foo 导航到 /user/bar 时，将重复使用相同的组件实例。由于两条路由都渲染相同的组件，因此这比销毁旧实例然后创建新实例更有效。但是，这也意味着组件的生命周期钩子不会被调用。

...但不清楚组件是否仅在没有中间导航步骤时才被重用。是否有任何文档详细讨论了组件重用？

谢谢！

【问题讨论】：

【解决方案1】：

如果您从/user/foo 导航到/user/bar，则该组件将被重用。例如，这通常在显示产品页面时使用。 请注意，如果需要，有办法重建 component。

如果您将从/user/foo 导航到/another_page，然后导航到/user/bar，那么您的component 将在离开/another_page 时被销毁，并在导航到/user/bar 时创建。

总结一下：

/user/foo -> /another_page - 组件被销毁

/user/foo -> /user/bar - 组件将被重用

【讨论】：