Vue-router 重载组件

Question

我有几条路线，每条路线都加载 3 个组件。其中两个组件在所有路线上都是相同的。当我在这些路由之间移动时，我想传递新数据，并且在组件的某些初始化事件上，我想填充该组件的数据，以便它反映在 UI 上。我还想重新触发正在加载的组件的引导动画。我将如何去做。因为现在，我不知道在组件生命周期的哪个位置获取数据并使用这些新数据重新渲染组件。具体来说，在 myapps/1 和 /newapp/ 我有一个主视图组件和一个侧边栏组件。在 /newapp/ URL 中，我希望侧边栏上的所有图标都是红色的（主视图上的任何内容都没有被填充）并且主视图应该是空的。在 myapps/1 上，我想将数据从服务器加载到主视图中，如果全部填满，我希望侧边栏上的图标为绿色。现在会发生什么我加载 myapps/1，单击侧边栏中的第二个项目，主视图变为第二个视图。然后我 router.push(“/newapp/); 和侧边栏停留在第二个项目和第二个主视图上。所以 router.push(”/myapps/“); 不会重新加载我的侧边栏和我的主视图。

编辑：

在这里您可以看到我的路线、侧边栏和默认设置是相同的。

 const routes = [
  {
    path: "/myapps/newproject",
    components: {
      default: ProjectMain,
      "breadcrumbs": BreadcrumbsNewProject,
      "sidebar": SidebarProject,
     }
  },
  {
    path: "/myapps/:id",
    components: {
      default: ProjectMain,
      "breadcrumbs": BreadcrumbsCurrentProject,
      "sidebar": SidebarProject,
    }
  },
  {
    path: "/myapps/newversion/:id",
    components: {
      default: ProjectMain,
      "breadcrumbs": BreadcrumbsNewVersion,
      "sidebar": SidebarProject,
    }
  }
];

这是我的 ProjectMain.vue

 <template>
  <div class="wrapper wrapper-content">
    <component :is="currentProjectMain"></component>
  </div>
</template>

这是我在 index.html 中的路由器视图：

 <router-view name="sidebar"></router-view>

我在 index.html 中还有一个，默认的：

 <router-view></router-view>

当我单击侧边栏上的某个项目时，我会向 ProjectMain 发出事件以切换组件。就像这样：在侧边栏中：

 eventBus.$emit("currentProjectMainChanged", "appOverview");

或者

eventBus.$emit("currentProjectMainChanged", "appSettings");

而不是在 ProjectMain 中：

 eventBus.$on("currentProjectMainChanged", function(data) {
  if(data === "appOverview") {
    self.currentProjectMain = CurrentProjectAppOverview;
  }else if(data === "appSettings") {
    self.currentProjectMain = CurrentProjectSettings;
  }
});

如果我进入“/myapps/:id”。它加载了侧边栏和 ProjectMain，我通过以下引导类获得了侧边栏和 ProjectMain 的一点动画： <div class="animated fadeInUp"> 并且这两个组件都经历了整个生命周期。

默认情况下，侧边栏中选择了 appOverview，并且 CurentProjectAppOverview.vue 作为组件加载到 ProjectMain 中。然后我点击侧边栏中的 appSettings 并将类添加到侧边栏中的该项目以将其标记为选中，并且在 ProjectMain CurrentProjectSettings.vue 中作为组件加载。

但是然后在面包屑中我有一个按钮可以转到“/myapps/newversion/:id”这是问题所在。当我单击转到“/myapps/newversion/:id”（ router.push("/myapps/newversion/" + id); ）时，侧边栏上的第二项保持选中状态（appSettings）并且在 ProjectMain CurrentProjectSettings.vue 中保持加载，我没有得到侧边栏和 ProjectMain 的引导动画，并且组件不会经历它们的生命周期。

当我单击按钮转到“/myapps/newversion/:id”时，我想要的是我的引导动画（ <div class="animated fadeInUp"> ），我希望侧边栏和 ProjectMain 经历它们的整个生命周期。我希望在侧边栏上选择默认项目（所以 appOverview），并在 ProjectMain 中加载默认组件（所以 CurentProjectAppOverview.vue）。

边栏中的每个项目都有彩色按钮。如果我从“/myapps/:id”转到“/myapps/newversion/:id”，我想将服务器中的数据加载到 CurrentProjectAppOverview.vue 中，如果所有数据都已填满，我希望侧边栏上的按钮是绿色，如果不是，它应该是红色的。

所以简而言之，当在这两条路线之间移动时，我希望能够加载数据并填充我想要的字段，并且我希望选择和加载引导动画和默认视图，并且它们应该经历它们的整个生命周期。现在路由器只是按原样重用它们。

所以像“ReloadComponent：true”，或者销毁并重新创建组件。

我可以复制 SidebarProject.vue 和 ProjectMain.vue 并重命名它们，并且在每个路由中基本上加载一个副本，但这意味着我必须在不同的 .vue 文件中编写相同的代码。

在有一个选项将 YouComponent.route.canReuse 设置为 false 之前，我认为这会做我想要的，但它在最新版本中被删除了。

原文由 dari0h 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

部分感谢： https ://forum.vuejs.org/t/vue-router-reload-component/4429

我想出了一个适合我的解决方案：

首先，我在 jQuery 中添加了一个新函数，用于在组件加载时重新触发引导动画。

 $.fn.redraw = function(){
    return $(this).each(function(){
        var redraw = this.offsetHeight;
    });
};

在组件中：

 export default{
        created:function(){
            this.onCreated();
        },
        watch: {
            '$route' (to, from) {
                //on route change re run: onCreated
                this.onCreated();

                //and trigger animations again
                $("#breadcrumbsCurrentProject").find(".animated").removeClass("fadeIn").redraw().addClass("fadeIn");
            }
        }
}

当组件加载和路由重新加载或相同路由的 ID 更改但组件保持不变时，我调用 onCreated(); 方法，我只是再次调用该方法。这会处理新数据。

至于重新触发引导动画，我使用 redraw(); 我在应用程序开始时添加到 jQuery 的函数。这会重新触发 URL 更改的动画：

 $("#breadcrumbsCurrentProject").find(".animated").removeClass("fadeIn").redraw().addClass("fadeIn");

原文由 dari0h 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我面临着同样的问题。我将引用一个找到的答案，这真的很简单而且很棒。最简单的解决方案是将 :key 属性添加到：

 <router-view :key="$route.fullPath"></router-view>

这是因为如果处理相同的组件，Vue Router 不会注意到任何变化。使用该键，对路径的任何更改都将触发使用新数据重新加载组件。

原文由 Gkiokan 发布，翻译遵循 CC BY-SA 3.0 许可协议