Vue路由器重新加載組件

Question

我有幾個路由，每個加載3個組件。兩個組件在所有路線上都是相同的。 當我在這些路線之間移動時，我想傳遞新的數據，並在組件的某個init事件上填充該組件的數據，以便在UI上反映出來。 另外我想要重新加載組件的引導程序動畫。 我會如何去做這件事。 因爲現在，我不知道組件生命週期中的哪個位置可以獲取數據並使用這些新數據重新渲染組件。 Concretly在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> 

這是我的路由器視圖索引。 html：

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

而且，我還有一個index.html中，默認的：

<router-view></router-view> 

當我點擊側邊欄上的一些項目我發出事件到ProjectMain轉出的組件。所以像這樣： 在邊欄：

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

在ProjectMain

或

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

而且比：

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">）時，我想讓Sidebar和ProjectMain完成整個生命週期。我希望在側邊欄（如此appOverview）上選擇默認項目，並在ProjectMain中加載默認組件（如此CurentProjectAppOverview.vue）。

側邊欄中的每個項目都有彩色按鈕。如果我從「/ myapps /：id」去到「/ myapps/newversion /：id」，我想從服務器加載數據到CurrentProjectAppOverview.vue，如果所有數據都被填充了，我希望側邊欄上的按鈕是綠色，如果不是，它應該是紅色的。

所以簡而言之，當在這兩條路線之間移動時，我希望能夠加載數據並填充我想要的字段，並且我想要選擇並加載引導動畫和默認視圖，並且它們應該貫穿整個生命週期。現在路由器只是重用它們。

所以像「ReloadComponent：true」，或摧毀並重新創建組件。

我可以複製SidebarProject.vue和ProjectMain.vue並重命名它們，並在每個路由加載基本上一個副本，但這意味着我必須在不同的.vue文件中編寫相同的代碼。

之前有一個選項將YouComponent.route.canReuse設置爲false，這將做我想做的，但我認爲，但它在最新版本中被刪除。

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"); 
      } 
     } 
} 

我稱之爲onCreated();方法將組件載荷，當線路重載或相同路由變化的ID，但該組件保持不變，只需要調用方法再次。這照顧了新的數據。

至於重新引導引導動畫，我使用redraw();函數，我將jQuery添加到應用程序的開頭。這再次引發對URL變化的動畫：

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

Answer 2

看起來你正在使用vue-router。

我沒有你的代碼，但我可以告訴你我是如何處理這個的。 See named-views。

這裏是我的bundle.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> 

所以，我所做的是我告訴父模板查看路由器視圖的named-view。並根據路徑，拉出我在路由器映射中指定的組件。

對於我的'/'路徑工具欄==工具欄組件，但在'/ create'路徑toolbar = eventToolbar組件。

默認組件是動態的，它允許我使用子組件，而不用交換工具欄或altside組件。

Answer 3

這是我想出了：

import ProjectMain from './templates/ProjectMain.vue'; 
import SidebarProject from './templates/SidebarProject.vue'; 

//現在淺拷貝的對象，因此新對象作爲seperatete .vue文件處理有：$.extend({}, OriginalObject); //這是所以我不必須創造基本相同。因爲它們是不同的VUE文件，但VUE路由器將重新載入這些文件

const ProjectMainA = $.extend({}, ProjectMain); 
const ProjectMainB = $.extend({}, ProjectMain); 
const ProjectMainC = $.extend({}, ProjectMain); 
const SidebarProjectA = $.extend({}, SidebarProject); 
const SidebarProjectB = $.extend({}, SidebarProject); 
const SidebarProjectC = $.extend({}, SidebarProject); 

const routes = [ 
{ 
path: "/myapps/newproject", 
components: { 
default: ProjectMainA, 
"breadcrumbs": BreadcrumbsNewProject, 
"sidebar": SidebarProjectA 
} 
}, 
{ 
path: "/myapps/:id", 
components: { 
default: ProjectMainB, 
"breadcrumbs": BreadcrumbsCurrentProject, 
"sidebar": SidebarProjectB 
} 
}, 
{ 
path: "/myapps/newversion/:id", 
components: { 
default: ProjectMainC, 
"breadcrumbs": BreadcrumbsNewVersion, 
"sidebar": SidebarProjectC 
} 
} 
]; 

這基本上招數VUE路由器，以爲他是加載不同.vue成分，但它們實際上是相同的。所以我得到了我想要的一切：重新加載組件，動畫，生命週期，而且我不必編寫多個相似或相同的組件。 您怎麼看，我只是不確定這是否是最佳做法。