Vue路由器重新加载组件

Question

我有几个路线，每个路线装载3个组件。所有管线上的两个组件都相同。当我在这些路由之间移动时，我希望传递新数据，在组件的某个初始化事件上，我希望填充该组件的数据，以便它反映在UI上。我还想重新触发正在加载的组件的引导动画。我该怎么做呢。因为现在，我不知道在组件的生命周期中，我将在哪里获取数据，并使用这些新数据重新提交组件。具体来说，在myapps/1和/newapp/I中有一个主视图组件和一个侧栏组件。在/newapp/URL中，我希望侧边栏上的所有图标都是红色的（主视图上没有填充任何内容），主视图应该是空的。在myapps/1上，我想将服务器上的数据加载到主视图中，如果所有数据都已填充，我希望侧边栏上的图标为绿色。现在发生的事情我加载myapps/1，单击侧边栏中的第二个项目，主视图将更改为第二个视图。然后我就去了。推送（“/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,
    }
  }
];

这是我的主要任务。vue

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

这是我在索引中的路由器视图。html:

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

我在索引中还有一个。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的一点动画：

默认情况下，侧边栏中选择appOverview，CurentProjectAppOverview.vue作为ProjectMain中的组件加载。比我点击侧边栏中的appSet，类被添加到侧边栏中的项目中，以将其标记为选中，并在ProjectMain MONtProjectS中ettings.vue作为组件加载。

但在面包屑中，我有一个按钮可以转到“/myapps/newversion/：id”，这就是问题所在。当我点击进入“/myapps/newversion/：id”（router.push（“/myapps/newversion/”id）） ）侧栏上的第二项保持选中状态（appSettings）并位于ProjectMain CurrentProjectSettings中。vue仍然处于加载状态，我没有获得侧栏和ProjectMain的引导动画，组件也没有经历其生命周期。

当我点击按钮转到/myapps/newversion/： id时，我想要的是我的引导动画（

侧边栏中的每个项目都有彩色按钮。如果我从“/myapps/：id”转到“/myapps/newversion/：id”，我想将数据从服务器加载到CurrentProjectAppOverview。如果所有数据都已填充，我希望侧边栏上的按钮为绿色，如果没有，则应为红色。

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

所以类似于“重新加载组件：true”，或者销毁并重新创建组件。

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

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




Answer 1

看起来你正在使用vue路由器。

我没有你的密码，但我可以告诉你我是如何处理的。请参见命名视图。

这是我的包中的路由器地图。js文件：

const router = new VueRouter({
routes: [
    { path: '/',
      components: {
        default: dashboard,
        altside: altSide,
        toolbar: toolbar
      },
    },
    { path: '/create',
      components: {
        default: create,
        altside: altSide,
        toolbar: toolbar
      },
    },
    { path: '/event/:eventId', 
        name: 'eventDashboard',
        components: { 
            default: eventDashboard,
            altside: altSide,
            toolbar: eventToolbar,
        },
        children: [
            { path: '/', name: 'event', component: event },
            { path: 'tickets', name: 'tickets', component: tickets},
            { path: 'edit', name: 'edit', component: edit },
            { path: 'attendees', name: 'attendees', component: attendees},
            { path: 'orders', name: 'orders', component: orders},
            { path: 'uploadImage', name: 'upload', component: upload},
            { path: 'orderDetail', name: 'orderDetail', component: orderDetail},
            { path: 'checkin', name: 'checkin', component: checkin},
        ],
    }
]
})

我有“默认”、“altside”和“工具栏”的命名视图，我为每个路径分配一个组件到命名视图。

后半部分是在父组件中分配名称

<router-view  name="toolbar"></router-View>   

这是我的父模板：

<template>

    <router-view class="view altside" name="altside"></router-view>
    <router-view class="view toolbar" name="toolbar"></router-view>
    <router-view class="view default"></router-view>
</template>

所以，我所做的是告诉父模板查看路由器视图的命名视图。根据路径，拉出我在路由器地图中指定的组件。

对于我的“/”路径工具栏==工具栏组件，但在“/create”路径工具栏=事件工具栏组件中。

默认组件是动态的，这允许我使用子组件，而无需交换工具栏或altside组件。

Answer 2

部分原因如下：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");
            }
        }
}

我调用onCreated（） 方法当组件加载、路由重新加载或相同路由的ID更改但组件保持不变时，我只需再次调用该方法。这将处理新数据。

至于重新触发引导动画，我使用重绘（）；函数，我添加到jQuery在应用程序的开始。

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

Answer 3

我也面临同样的问题。我将引用一个找到的答案，这是非常简单和伟大的。最简单的解决方案是将：key属性添加到：

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

这是因为如果对同一组件进行寻址，Vue路由器不会注意到任何更改。使用该键，对路径的任何更改都将触发使用新数据重新加载组件。