Vue.js路由器：組件準備就緒時運行代碼

我正在使用Vue.js及其官方路由器處理單頁應用程序。Vue.js路由器：組件準備就緒時運行代碼

我有一個菜單和一個組件（.vue文件）每個部分，我加載使用路由器。在每一個組件我有類似這樣的代碼：

<template> 
    <div> <!-- MY DOM --> </div> 
</template> 

<script> 
    export default { 
     data() {}, 
     methods: {}, 
     route: { 
      activate() {}, 
     }, 
     ready: function(){} 
    } 
</script>

我想執行一段代碼（INIT一個jQuery插件），一旦組件已經完成了過渡。如果我在ready事件中添加我的代碼，它僅在組件第一次加載時才被觸發。如果我在route.activate中添加我的代碼，它每次都會運行，這很好，但是DOM尚未加載，因此無法啓動我的jQuery插件。

每當組件完成轉換並且其DOM已準備就緒時，如何運行我的代碼？

來源

2016-07-13 Agu Dondo

由於您使用的是Vue.js路由器，這意味着您每次轉換到新路由時，Vue.js都需要更新DOM。默認情況下，Vue.js異步執行DOM更新。

爲了等到Vue.js完成更新DOM，可以使用Vue.nextTick（回調）。回調將在DOM更新後調用。

在你的情況，你可以嘗試：

route: { 
    activate() { 
     this.$nextTick(function() { 
      // => 'DOM loaded and ready' 
     }) 
    } 
}

欲瞭解更多信息：

來源

2016-07-14 02:29:35 maoosi

問題是就緒方法只運行第一次組件加載，但如果我去另一條路線，然後我回到這個，準備方法不會運行。每當路線被調用時，我都需要它運行。 –

我剛剛更新了我的代碼示例;） – maoosi

我試圖訪問元素$（'。test'），它存在於nextTick回調的組件dom中，我無法獲取它。它與setTimeout雖然工作，所以似乎dom尚未加載 –

雖然這可能有點晚了......如果我猜對了，當你不在的時候，有問題的組件會停留在頁面上瀏覽路線。這樣，Vue重用了組件，改變了它內部需要改變的內容，而不是破壞和重新創建它。 Vue提供key屬性至Properly trigger lifecycle hooks of a component。通過更改組件的key，我們可以指示Vue重新渲染它。有關詳細信息，請參閱key in guide，代碼示例請參見key in api。

來源

2016-10-24 06:37:31

Vue.js路由器：組件準備就緒時運行代碼

回答

相關問題