Vue.js 路由器：當組件准備好時運行代碼

Question

我正在使用 Vue.js 及其官方路由器開發單頁應用程序。

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

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

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

我想在組件完成轉換后執行一段代碼（初始化一個 jQuery 插件）。如果我在ready事件中添加我的代碼，它只會在組件第一次加載時被觸發。 如果我在route.activate添加我的代碼，它每次都會運行，這很好，但 DOM 尚未加載，因此無法初始化我的 jQuery 插件。

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

Answer 1

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

為了等到 Vue.js 完成更新 DOM，您可以使用 Vue.nextTick(callback)。 DOM 更新后將調用回調。

在您的情況下，您可以嘗試：

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

欲了解更多信息：

• https://vuejs.org/api/#Vue-nextTick
• https://vuejs.org/guide/reactivity.html#Async-Update-Queue

Answer 2

你可以使用

mounted(){
  // jquery code
}

Answer 3

雖然這可能有點晚了......如果我猜對了，當您在路由之間導航時，有問題的組件會留在頁面上。 這樣，Vue 會重用組件，更改其中需要更改的內容，而不是銷毀並重新創建它。 Vue 提供了一個key屬性來Properly trigger lifecycle hooks of a component 。 通過更改組件的key ，我們可以指示 Vue 重新渲染它。 有關詳細信息，請參閱鍵入指南，鍵入 api以獲取代碼示例。

Answer 4

我正在使用Vue.js及其官方路由器開發單頁應用程序。

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

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

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

組件完成轉換后，我想執行一段代碼（初始化jQuery插件）。如果我將代碼添加到ready事件中，則僅在第一次加載組件時才會觸發該代碼。 如果我在route.activate添加代碼，那么route.activate都會運行它，這很好，但是尚未加載DOM，因此無法初始化我的jQuery插件。

每當組件完成轉換並准備好DOM時，如何運行我的代碼？