Vue.js Router：组件准备就绪时运行代码

我正在使用 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 准备就绪时，如何运行我的代码？

当您使用 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